I am using create-react-native-app and am using a StackNavigator with a createBottomTabNavigator function. The icons are being styled through a seperate component but I am having trouble styling the rest of the navigator.
I have created these options I want to use:
tabBarOptions: {
showLabel: false,
style: {
backgroundColor: Colors.greyGreen
}
}
Hopefully this is very obvious to someone and would appreciate the help! I have tried placing the options in various places within the code below (Both places do not work):
const config = Platform.select({
web: { headerMode: 'screen' },
default: {},
// TRIED PLACING THE OPTIONS HERE
});
const HomeStack = createStackNavigator(
{
Home: HomeScreen,
},
config
);
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
/>
),
};
HomeStack.path = '';
const LinksStack = createStackNavigator(
{
Links: LinksScreen,
},
config
);
LinksStack.navigationOptions = {
tabBarLabel: 'Links',
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'} />
),
};
LinksStack.path = '';
const SettingsStack = createStackNavigator(
{
Settings: SettingsScreen,
},
config
);
SettingsStack.navigationOptions = {
tabBarLabel: 'Settings',
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'} />
),
};
SettingsStack.path = '';
const tabNavigator = createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
// TRIED PLACING THE OPTIONS HERE
});
tabNavigator.path = '';
export default tabNavigator;
In case you want to see the icon component:
export default function TabBarIcon(props) {
return (
<Ionicons
name={props.name}
size={26}
style={{ marginBottom: -3 }}
color={props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
}
You should place it here ,
const tabNavigator = createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
},{
tabBarOptions: {
showLabel: false,
style: {
backgroundColor: Colors.greyGreen
}
}
});
Hope it helps. feel free for doubts