How to get a background image in createBottomTabNavigator? - react-native

Question

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.

Answer 1

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>
)
}
})

Answer 2

I wish I could comment but I don't have enough reputation to do that.
<React.Fragment>
<ImageBackground
source={require('./images/bottom_btn.png')}
style={{width: '100%', height: 80}}
>
<TabBarComponent {...props} />
</ImageBackground>
</React.Fragment>
This worked for me. Spent almost a day figuring out the <ImageBackground> thing.

Answer 3

With the latest version of the 'react-navigation-tabs' the above solutions don't work, what we need to do is, we should pass the following three properties to the BottomTabBar component explicitly:
<BottomTabBar
{...this.props}
getButtonComponent={this.getButtonComponent}
getAccessibilityRole={() => 'button'}
getAccessibilityStates={({focused}) => (focused ? ['selected'] : [])}
/>
So the full code for this example is as follows :
class TabBar extends React.Component {
render() {
return (
<BottomTabBar
{...this.props}
getButtonComponent={this.getButtonComponent}
getAccessibilityRole={() => 'button'}
getAccessibilityStates={({focused}) => (focused ? ['selected'] : [])}
/>
);
}
getButtonComponent({route}) {
if (route.key === 'Other') {
return () => <View />; // a view that doesn't render its children
} else {
return null; // use the default nav button component
}
}
}
const Tabs = createMaterialTopTabNavigator(
{
home: {
screen: Home_StackNavigator,
navigationOptions: ({navigation}) => ({
title: 'home',
tabBarIcon: ({tintColor}) => (
<FontAwesome name="home" size={23} color={tintColor} />
),
}),
},
favourites: {
screen: Favourites_StackNavigator,
navigationOptions: ({navigation}) => ({
title: 'favourites',
tabBarIcon: ({tintColor}) => (
<Ionicons name="md-star" size={25} color={tintColor} />
),
}),
},
calendar: {
screen: Calendar_StackNavigator,
navigationOptions: ({navigation}) => ({
title: 'calendar',
tabBarIcon: ({tintColor}) => (
<Feather name="calendar" size={23} color={tintColor} />
),
}),
},
shoppingList: {
screen: ShoppingList_StackNavigator,
navigationOptions: ({navigation}) => ({
title: 'shopping List',
tabBarIcon: ({tintColor}) => (
<Feather name="shopping-bag" size={23} color={tintColor} />
),
}),
},
profile: {
screen: Profile_StackNavigator,
navigationOptions: ({navigation}) => ({
title: 'profile',
tabBarIcon: ({tintColor}) => (
<Feather name="user" size={23} color={tintColor} />
),
}),
},
},
{
tabBarPosition: 'bottom',
swipeEnabled: false,
animationEnabled: true,
tabBarOptions: {
showIcon: true,
activeTintColor: Colors.DARK.ICON_ACTIVE,
inactiveTintColor: Colors.DARK.ICON_INACTIVE,
style: {
backgroundColor: 'transparent',
},
labelStyle: {
textAlign: 'center',
fontSize: 10,
textTransform: 'capitalize',
color: Colors.DARK.ICON_INACTIVE,
marginBottom: 1,
width: 70,
},
indicatorStyle: {
borderBottomColor: Colors.DARK.ICON_INACTIVE,
borderBottomWidth: 2,
},
},
tabBarComponent: (props) => {
return (
<React.Fragment>
<ImageBackground
source={require('../../assets/images/image_bottom.jpg')}
style={{width: '100%', height: 60}}>
<TabBar {...props} />
</ImageBackground>
</React.Fragment>
);
},
},
);