React Native: How to add Icons on createBottomNavigator

Question

I want to add icons on my bottom navigator but I don't know how or where to put it. Can someone help me? I'm currently learning react native so please bear with me. Thank you!.

screenshot of bottom navigator

Here is my code for navigation:

    import { StyleSheet } from "react-native";
    import { createAppContainer, createSwitchNavigator } from "react-navigation";
    import { createStackNavigator } from "react-navigation-stack";
    import { createBottomTabNavigator } from "react-navigation-tabs";
    import SignInScreen from "./src/screens/SignInScreen";
    import SignUpScreen from "./src/screens/SignUpScreen";
    import RestaurantScreen from "./src/screens/RestaurantScreen";
    import RestaurantDetailScreen from "./src/screens/RestaurantDetailScreen";
    import MapScreen from "./src/screens/MapScreen";
    import MyDealsScreen from "./src/screens/MyDealsScreen";
    import { setNavigator } from "./src/navigationRef";
    import Header from "./src/components/Header";
    import React from "react";

    const switchNavigator = createSwitchNavigator({
    loginFlow: createStackNavigator({
    Signin: SignInScreen,
    Signup: SignUpScreen,
     }),
    mainFlow: createBottomTabNavigator({
    List: createStackNavigator({
      RestaurantList: RestaurantScreen,
      RestaurantDetail: RestaurantDetailScreen,
    }),
    Map: MapScreen,
    MyDeals: MyDealsScreen,
    }),
    });

user_4030220 · Answer

you can do this please check official document for reference

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    
       (
            
          ),
        }}
      />
       (
            
          ),
          tabBarBadge: 3,
        }}
      />
       (
            
          ),
        }}
      />
    
  );
}

React Native: How to add Icons on createBottomNavigator

1 Answers