I have been trying to get a background image for the tabbar. I tried using tabBarComponent
but it hides the tabs under it.
The code that I am using is
export default MainNavigation = createBottomTabNavigator(
{
Profile:{
screen: Profile,
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
return <Image source={require('./images/tab_explore.png')} />
}
}),
}
},
{
tabBarComponent: props =>{
return(
<View style={{backgroundColor:"black"}}>
<Image
style={{ width:'100%', height: 80 }}
source={ require('./images/bottom_btn.png')} />
</View>
);
}
})
Does anyone know how to solve the problem? Thanks in advance!
Current Output:
It should show the tabs on top of orange color.
Maybe it is too late, but I wish this answer will help many people. In React Navigation version 2 you can do it like this:
import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';
You don't need to install react-navigation-tabs if you have installed 'react-navigation'.
Then create TabBarComponent by const TabBarComponent = (props) => (<BottomTabBar {...props} />);
. You will use tabBarComponent
key in createBottomTabNavigator
. BackgroundColor: 'transparent' for default tabs and VOILA!
The following code will give you the main idea
export const Tabs = createBottomTabNavigator({
Posters: {
screen: Posters,
navigationOptions: {
tabBarLabel: 'AFİŞA',
tabBarIcon: ({tintColor}) => (
<MaterialIcons name="local-movies" size={24} color={tintColor} />
)
}
},
ComingSoon: {
screen: ComingSoon,
navigationOptions: {
tabBarLabel: 'TEZLİKLƏ',
tabBarIcon: ({tintColor}) => (
<MaterialIcons name="movie" size={24} color={tintColor} />
)
}
},
Tickets: {
screen: Tickets,
navigationOptions: {
tabBarLabel: 'BİLETLƏR',
tabBarIcon: ({tintColor}) => (
<MaterialIcons name="confirmation-number" size={24} color={tintColor} />
),
}
},
More: {
screen: More,
navigationOptions: {
tabBarLabel: 'MENU',
tabBarIcon: ({tintColor}) => (
<MaterialIcons name="more-horiz" size={24} color={tintColor} />
),
tabBarOnPress: ({ navigation }) => {
return <Text>sd</Text>
}
}
},
},
{
order: ['Posters', 'ComingSoon', 'Tickets', 'More' ],
tabBarOptions: {
activeTintColor: colors.darkYellow(),
inactiveTintColor: 'white',
labelStyle: {
fontSize: 12,
fontWeight: 'bold',
fontFamily: defaults.fontFamily
},
style: styles.tabBar,
},
tabBarComponent: props =>{
return(
<React.Fragment>
<TabBarComponent {...props} />
<Image style={styles.fakeTabBackground}/>
</React.Fragment>
)
}
})