set game images

src/navigations/BottomTabNavigator.js

 import React from 'react';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import Home from '../screens/home/Home';
-import  Wallet  from '../screens/home/Wallet';
 import Settings from '../screens/home/Settings';
 import WelcomeExercise from '../screens/home/exercise/WelcomeExercise';
 // import  { Home, Wallet, Settings, WelcomeExercise}  from '../screens';
-import ExerciseNavigator from './ExerciseNavigator'
+import ExerciseNavigator from './ExerciseNavigator';
 import {COLORS, ROUTES} from '../constants';
 import Icon from 'react-native-vector-icons/Ionicons';
-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
 import CustomTabBarButton from '../components/CustomTabBarButton';
 import CustomTabBar from '../components/CustomTabBar';
 import Logo from '../assets/icons/fitness1.svg';
 import Logo1 from '../assets/icons/fitness2.svg';
-import { Button, TextInput, View,SafeAreaView,KeyboardAvoidingView} from 'react-native';
+import GameNavigator from './GameNavigator';
+import AuthNavigator from './AuthNavigator';
 const Tab = createBottomTabNavigator();
 
 function BottomTabNavigator() {
@@ -21,45 +21,86 @@ function BottomTabNavigator() {
     // <KeyboardAvoidingView>
     <Tab.Navigator
       tabBar={props => <CustomTabBar {...props} />}
-    screenOptions={({route}) =>({
+      screenOptions={({route}) => ({
         tabBarHideOnKeyboard: true,
         headerShown: false,
         tabBarStyle: styles.tabBarStyle,
         tabBarInactiveTintColor: COLORS.dark,
         tabBarActiveTintColor: COLORS.primary,
-      tabBarShowLabel:false,
-      tabBarIcon: ({color, size, focused}) =>
-      {
+        tabBarShowLabel: false,
+        tabBarIcon: ({color, size, focused}) => {
           if (route.name === ROUTES.HOME_TAB) {
-          return focused ? <Icon name='home' size={22} color={color} /> :<Icon name='home-outline' size={22} color={color} />;
+            return focused ? (
+              <Icon name="home-sharp" size={22} color={color} />
+            ) : (
+              <Icon name="home-outline" size={22} color={color} />
+            );
           } else if (route.name === ROUTES.EXERCISE_HOME) {
-           return focused ? <Logo1 width={22} height={22} /> : <Logo width={22} height={22} /> ;
-         } else if (route.name === ROUTES.WALLET) {
-           return focused ? <Icon name='wallet' size={22} color={color} /> :<Icon name='wallet-outline' size={22} color={color} />;
+            return focused ? (
+              <Logo1 width={22} height={22} />
+            ) : (
+              <Logo width={22} height={22} />
+            );
+          } else if (route.name === ROUTES.GAME_HOME) {
+            return focused ? (
+              <Icon name="game-controller-sharp" size={22} color={color}/>
+            ) : (
+              <Icon name="game-controller-outline" size={22} color={color}/>
+            );
           } else if (route.name === ROUTES.SETTINGS) {
-           return focused ? <Icon name='notifications-sharp' size={22} color={color} /> :<Icon name='notifications-outline' size={22} color={color} />;
-         }
+            return focused ? (
+              <Icon name="notifications-sharp" size={22} color={color} />
+            ) : (
+              <Icon name="notifications-outline" size={22} color={color} />
+            );
+          } else if (route.name === ROUTES.LOGIN) {
+            return focused ? (
+              <Icon name="person-circle-sharp" size={22} color={color} />
+            ) : (
+              <Icon name="person-circle-outline" size={22} color={color} />
+            );
           }
+        },
       })}>
-      <Tab.Screen name={ROUTES.HOME_TAB} component={Home} 
+      <Tab.Screen
+        name={ROUTES.HOME_TAB}
+        component={Home}
         options={{
           tabBarButton: props => <CustomTabBarButton {...props} />,
         }}
       />
-      <Tab.Screen name={ROUTES.SETTINGS} component={Settings} 
+      <Tab.Screen
+        name={ROUTES.SETTINGS}
+        component={Settings}
         options={{
           tabBarButton: props => <CustomTabBarButton {...props} />,
-      }}/>
-      <Tab.Screen name={ROUTES.WALLET} component={Wallet} 
+        }}
+      />
+      <Tab.Screen
+        name={ROUTES.GAME_HOME}
+        component={GameNavigator}
         options={{
           tabBarButton: props => <CustomTabBarButton {...props} />,
-      }}/>
-      <Tab.Screen options={{
+        }}
+      />
+      <Tab.Screen
+        options={{
+          headerShown: false,
+          headerBackTitleVisible: false,
+          tabBarButton: props => <CustomTabBarButton {...props} />,
+        }}
+        name={ROUTES.EXERCISE_HOME}
+        component={ExerciseNavigator}
+      />
+      <Tab.Screen
+        options={{
           headerShown: false,
           headerBackTitleVisible: false,
           tabBarButton: props => <CustomTabBarButton {...props} />,
         }}
-       name={ROUTES.EXERCISE_HOME} component={ExerciseNavigator} />
+        name={ROUTES.LOGIN}
+        component={AuthNavigator}
+      />
     </Tab.Navigator>
     // </KeyboardAvoidingView>
   );
@@ -76,11 +117,11 @@ const styles = StyleSheet.create({
     bottom: 5,
     right: 10,
     left: 10,
-    height: 58
+    height: 58,
   },
   mr7: {
     color: COLORS.primary,
     stroke: COLORS.primary,
-    fill: COLORS.primary
-  }
-})
\ No newline at end of file
+    fill: COLORS.primary,
+  },
+});