How to get a background image in createBottomTabNavigator?

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>

        )
    }
})