dcs-rn-ui

This component uses react-navigation module, more precisely the TabNavigator, which creates tabs that can be included into any container.
To use it, you need to inject the navigator like it is described next:

<ThemeProvider>
  <AppNavigator />
</ThemeProvider>

Then in your `.js` navigator file, which in this case its called AppNavigator, you need to define the required parameters that will be passed into the `Tabs` component, which is just the routeConfig property described on the following example:

const tabsSetupConfig = {
  routeConfig: {
    ScreenOne: {
      screen: ScreenOne,
      path: '/screenone',
      navigationOptions: {
        title: 'Title of the Screen One',
      },
    },
    ScreenTwo: {
      screen: ScreenTwo,
      path: '/screentwo',
      navigationOptions: {
        title: 'Title of the Screen Two',
      },
    },
  },
  navigatorConfig: {}
}

export default Tabs(tabsSetupConfig)

If you want to overide the default tabs layout, just include into navigatorConfig the properties defined next, which are the ones set by default on the Tabs.js component:

{
  tabBarPosition: '<position>' // Will choose position based on operating system (ios: bottom, android: top),
  tabBarComponent: <component> // Primary by default,
  swipeEnabled: true,
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: 'rgba(255, 255, 255, 1)',
    inactiveTintColor: 'rgba(255, 255, 255, 1)',
    style: {
      backgroundColor: '#000000',
    },
    // Note that setting 'tabStyle' property, disables the ability to style 'indicatorStyle'
    indicatorStyle: {
      backgroundColor: '#FF0000',
    },
  },
}

Supported Tabs Components:

• Primary (default)

How to use:

import { Navigation } from 'dcs-rn-ui'

const tabsSetupConfig = {
  routeConfig: {
    FirstScreen: {
      screen: () => null,
      navigationOptions: ({ screenProps }) => {
        const { tabBarIcon, tabBarLabel } = Navigation.Tabs.Item({
          label: 'text',
          icon: 'icon-name',
        })

        return { tabBarIcon, tabBarLabel }
      },
    },
    AuthPin: {
      screen: () => null,
      navigationOptions: ({ screenProps }) => {
        const { tabBarIcon, tabBarLabel } = Navigation.Tabs.Item({
          label: 'text',
          icon: 'icon-name',
        })

        return { tabBarIcon, tabBarLabel }
      },
    },
  },
  navigatorConfig: {
    initialRouteName: 'FirstScreen',
    tabBarComponent: Navigation.Tabs.Primary ( by default it uses the primary, so this is optional)
  },
}

If for some reason the default properties of the Tabs component need to be changed, modify the variable named defaultNavigatorConfig located in the Tabs.js file.