react native bottom tab navigation version 4 icon problem

Question

I have been trying to put an Icon in the bottom tab, I have been using the react navigation tabs version 4. I have tried to upgrade to version 5 but that's a different story.

The goal is just to include an icon but I'm just failing left and right. The documentation says to add it in the navigationOptions

HomeScreen.navigationOptions = ({navigation}) => {
    return {
    title: 'Get Me Goods',
    headerStyle: HeaderStyle.headerStyle,
    headerTintColor: HeaderStyle.headerTintColor,
    headerTitleStyle: HeaderStyle.headerTitleStyle,
    tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>,
    headerLeft: () => <MenuImage
        onPress={() => {
            // navigation.openDrawer()
            navigation.navigate('SignOut')
        }}
    />
    ,
    headerRight: () => 
        <MenuImage
            onPress={() => {
                navigation.openDrawer()
            }}
        />
    }
}

and also tried it in the bottom tab navigator

const BottomTabMenu = createBottomTabNavigator(
    {
        Home: { 
            screen: Home, 
            options: {
                tabBarLabel: 'Testing',
                tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>
            }
        },
        Me, 
        Search, 
        Messages, 
        Sell
    }, 
    {
        initialRouteName: 'Home'
    }   
)

what else am I missing?

score 0 · Answer 1 · answered Aug 31 '20 at 19:09

Got this figured out, just used the navigationOptions instead of options in the bottom tab bar configuration

const BottomTabMenu = createBottomTabNavigator(
    {
        Home: { 
            screen: Home, 
            navigationOptions: {
                tabBarLabel: 'Testing',
                tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>
            }
        },
        Me, 
        Search, 
        Messages, 
        Sell
    }, 
    {
        initialRouteName: 'Home'
    }   
)

react native bottom tab navigation version 4 icon problem

1 Answers1