React tabs

tabs.js

const HomeTab = createMaterialTopTabNavigator({
  Tab1: HomeScreen,
  Tab2: HomeScreen02,
  Tab3: HomeScreen03,
  Tab4: HomeScreen04,
  Tab5: HomeScreen05,
  Tab6: HomeScreen06,
  Tab7: HomeScreen07,
}, {
  tabBarOptions: {
    scrollEnabled: true,
    labelStyle: {
      fontSize: 12,
    },
    tabStyle: {
      width: Dimensions.get('window').width / 4,
    },
    style: {
      backgroundColor: 'tomato',
    },
    indicatorStyle: {
      backgroundColor: '#fff'
    }
  },
});

HomeTab.navigationOptions = {
  header: null
};

const HomeTabStack = createStackNavigator({
  Home: HomeTab,
  Detail: DetailScreen,
});

export const AppNavigator =  createBottomTabNavigator(
  {
    Home: HomeTabStack,
    Setting: SettingStack,
    Profile: ProfileScreen,
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Setting') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        } else if (routeName === 'Profile') {
          iconName = `ios-person${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);