CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Job
Job

Reputation: 3

Icon in createMaterialBottomTabNavigator isn't showing

I'm trying to set up a MaterialBottomTabNavigator in my app with custom icons using react-native-vector-icons, but the icons are not showing up. Am I doing something wrong in the NavigatorConfig?

At first I thought it was because my icons aren't loading in correctly, but placing them in a View on another screen (anywhere but inside the MaterialBottomTab) makes them show up no problem. Even the standard MaterialIcons provided with vector-icons aren't showing up in the bottomTab, but any other place is no problem.

I've tried shifting the configs around, placing the tabBarIcon in both the screen config, aswell as the navigator config, but still no result. I've also tried the showIcon option, but also no results.

Here's my code right now:

export const userNavigation = createMaterialBottomTabNavigator({Bars, Settings}, {
    Bars: {
        screen: Bars,
        navigationOptions: {
            tabBarIcon: ({focused}) => <Icon name="bars" size={20} color={focused ? '#FFF' : '#DACE91'}/>,
        },
    },
    shifting: false,
    labeled: true,
    activeColor: '#FFF',
    inactiveColor: '#DACE91',
});

I expect the icons to show up in the bottomTab, but I get no error messages or any other feedback as to why they aren't showing.

Upvotes: 0

Views: 1919

Answers (2)

user11716837
user11716837

Reputation:

to fix then icon add these in bootom navigation shifting: false, labeled: true,

Upvotes: 0

Auticcat
Auticcat

Reputation: 4489

You are putting in the tab configs the route configs.

createMaterialBottomTabNavigator({
                                Bars:{
                                    screen: Bars,
                                    navigationOptions:{
                                                      tabBarIcon: ({focused}) =><Icon name="bars" size={20} color={focused ? '#FFF' : '#DACE91'}/>,
                                          }
                                     } 
                                },{
                                    shifting: false,
                                    labeled: true,
                                    activeColor: '#FFF',
                                    inactiveColor: '#DACE91',
                                   })

Hopefully this will help!

Upvotes: 2

Related Questions