How to display tab bar icon in react navigation 4

user_8200791 0
Viewed 2440

I want to display bottom tab tar in react-navigation 4, but there is no luck to make it happen, even I use it. Can anyone help me to find the problem with my code or which option should I use?

static navigationOptions = {
    title: "Map",
    tabBarIcon: ({ tintColor }) => {
      return <Icon name="home" size={30} color={tintColor} />;
    }
}

in any component screen, it does still not work.

Here is my router

I want to apply the bottom tab icon to homescreen


const MainAuthenticated = createAppContainer(
  createBottomTabNavigator(
    {
      main: {
        screen: createBottomTabNavigator({
          Marketplace: {
            screen: createStackNavigator({
              home: {
                screen: HomeScreen,
              },
              profile: { screen: Profile },
              business: { screen: MyBusiness },

              logout: { screen: Logout },

              itemlist: { screen: ItemList },
              itemcreate: { screen: ItemCreate },
              itemdetail: { screen: ItemDetail },
              businesscreate: { screen: BusinessCreate },
              businessdetail: { screen: MyBusinessDetail },
            }),
          },
          XOrders: { screen: OrderScreen },
          Favorite: { screen: FavoriteScreen },
        }),
      },
    },
    {
      defaultNavigationOptions: {
        tabBarVisible: false,
      },
    },
  ),
);
react-navigation react-native
1 Answers

Here is the working code to add the bottom tab bar icon in react-navigation v4

import Ionicons from 'react-native-vector-icons/Ionicons';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

export default createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Home') {
          iconName = focused
            ? 'ios-information-circle'
            : 'ios-information-circle-outline';
          // Sometimes we want to add badges to some icons.
          // You can check the implementation below.
          IconComponent = HomeIconWithBadge;
        } else if (routeName === 'Settings') {
          iconName = focused ? 'ios-list-box' : 'ios-list';
        }

        // You can return any component that you like here!
        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);

If you wanted to use some .png or jpeg or some other image file instead of vector icons just replace this

<IconComponent name={iconName} size={25} color={tintColor} /> // replace this with below

<Image source={require('your image path')} style={{height: 30, width: 30}} />
user_77139200
Related