Reactnavigation v5

Adding Icons and changing color in reactnavigation V5 tabbar as shown below.

Before diving directly into code , lets first install all the packages

npm install @react-navigation/native
npm install @react-navigation/bottom-tabs
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

If something is missing then please go through the documentation of react Navigation (https://reactnavigation.org/docs/getting-started)

import React from 'react';

import {Image} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';

import {Images} from '../images'; // all the required images are placed in Imaged folder
import {AppColor} from '../constants'; // App color  
import * as Screen from '../screens'; // imported all the screens

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

// home screen
function HomeStack() {
  return (
    
      
      
    
  );
}
//Search screen
function SearchStack() {
  return (
    
      
    
  );
}

//cart screens
function CartStack() {
  return (
    
      
    
  );
}

//profile screens
function ProfileStack() {
  return (
    
      
    
  );
}

//more screens
function MoreStack() {
  return (
    
      
    
  );
}

export default function App() {
  return (
    
       ({
          tabBarIcon: ({focused}) => {
            let iconName;
            if (route.name === 'Home') {
              iconName = (
                
              );
            }
            if (route.name === 'Search') {
              iconName = (
                
              );
            }
            if (route.name === 'Cart') {
              iconName = (
                
              );
            }

            if (route.name === 'Profile') {
              iconName = (
                
              );
            }

            if (route.name === 'More') {
              iconName = (
                
              );
            }
            return iconName;
          },
        })}
        tabBarOptions={{
          activeTintColor: AppColor.orangeColor,
          inactiveTintColor: AppColor.loginTextColor,
        }}>
        
        
        
        
        
      
    
  );
}

If there are any confusion regarding the above code, please feel free to comment below.