React Navigation

Installation

https://reactnavigation.org/docs/getting-started

Themes

https://reactnavigation.org/docs/themes/

src/navigations/Navigator.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from"react-native-vector-icons/Ionicons"
import React from 'react'
import MessageScreen from '../Screens/MessageScreen';
import FeedScreen from '../Screens/FeedScreen';
import ShopScreen from '../Screens/ShopScreen';
import ExploreScreen from '../Screens/ExploreScreen';
import ProfileScreen from '../Screens/ProfileScreen';
import ProductNavigation from './ProductNavigation';

const Tab = createBottomTabNavigator()

function Navigators() {
  return (
	<Tab.Navigator screenOptions={
		(
			{route})=>({
				headerShown:false, 
				tabBarIcon:(
					{focused, color, size})=>{
					let iconName;
					if (route.name === "Feed"){
						iconName = focused ? "ios-timer" :"ios-timer"
					}else if (route.name ==="Shop"){
						iconName = focused ? "cart-outline" : 'cart-outline'
					}else if (route.name === "Explore"){
						iconName = focused ? "search-outline":"search-outline"
					}else if (route.name === "Messages"){
						iconName = focused ? "chatbox":"chatbox"
					}else if (route.name === "Profile"){
						iconName = focused ? "person-circle-outline":"person-circle-outline"
					}
		return <Ionicons name={iconName} size={size} color={color } />;
	},
	tabBarActiveColor:"green",
	tabBarInactiveColor : '#2d2d2d',
	tabBarStyle:{position:"absolte", 
	backgroundColor:"red.500",
	// height:"53"
}
	})}>
		<Tab.Screen name="Feed" component={FeedScreen}/>
		<Tab.Screen name="Shop" component={ProductNavigation}/>
		{/* <Tab.Screen name="Explore" component={ExploreScreen}/> */}
		<Tab.Screen name="Messages" component={MessageScreen}/>
		<Tab.Screen name="Profile" component={ProfileScreen}/>
	</Tab.Navigator>
  )
}

export default Navigators