Skip to content

Instantly share code, notes, and snippets.

@mauriciopazpp
Created July 20, 2018 02:14
Show Gist options
  • Save mauriciopazpp/da0f3640457d8800c9ff5a401ffed9c3 to your computer and use it in GitHub Desktop.
Save mauriciopazpp/da0f3640457d8800c9ff5a401ffed9c3 to your computer and use it in GitHub Desktop.
React tabs
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',
},
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment