restructured drawer navigator

src/components/bottomTabBar/view/bottomTabBarView.tsx

@@ -13,21 +13,26 @@ import styles from './bottomTabBarStyles';
 import Icon, { IconContainer } from '../../icon';
 import scalePx from '../../../utils/scalePx';
 import { updateActiveBottomTab } from '../../../redux/actions/uiAction';
+import { useDispatch } from 'react-redux';
 
 
 const BottomTabBarView = ({
-  dispatch,
   state : { routes , index },
   navigation,
   activeTintColor,
   inactiveTintColor,
 }) => {
 
+  const dispatch = useDispatch();
+
+  useEffect(()=>{
+    dispatch(updateActiveBottomTab(routes[index].name))
+  },[index])
 
 
-  const _jumpTo = (route, isFocused, idx) => {
 
-  
+  const _jumpTo = (route, isFocused) => {
+
     if(route.name === ROUTES.TABBAR.POST_BUTTON){
       navigation.navigate(ROUTES.SCREENS.POST, {key: 'editor_post'})
       return;
@@ -45,8 +50,6 @@ const BottomTabBarView = ({
       navigation.navigate(route.name);
     }
 
-    dispatch(updateActiveBottomTab(routes[idx].name))
-
   };
 
 
@@ -76,7 +79,7 @@ const BottomTabBarView = ({
 
     return (
       <View key={route.key} style={{ flex: 1, alignItems: 'center' }}>
-        <TouchableOpacity onPress={() => _jumpTo(route, isFocused, idx)}>
+        <TouchableOpacity onPress={() => _jumpTo(route, isFocused)}>
           {_tabBarIcon}
         </TouchableOpacity>
       </View>

src/components/sideMenu/container/sideMenuContainer.js

@@ -14,7 +14,6 @@ const SideMenuContainer = ({ navigation }) => {
 
   const isLoggedIn = useSelector((state) => state.application.isLoggedIn);
   const currentAccount = useSelector((state) => state.account.currentAccount);
-  const otherAccounts = useSelector((state) => state.account.otherAccounts);
   const isVisibleAccountsBottomSheet = useSelector(
     (state) => state.ui.isVisibleAccountsBottomSheet,
   );

src/components/sideMenu/view/sideMenuStyles.js

@@ -1,4 +1,5 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
 import { isRTL } from '../../../utils/I18nUtils';
 import scalePx from '../../../utils/scalePx';
 
@@ -7,6 +8,7 @@ export default EStyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     backgroundColor: '$primaryBackgroundColor',
+    paddingBottom: getBottomSpace(),
   },
   headerView: {
     flex: 1,

src/navigation/botomTabNavigator.tsx

@@ -11,25 +11,15 @@ import {
     Profile,
     Wallet,
 } from '../screens';
-import { useDispatch } from 'react-redux';
 
 const Tab = createBottomTabNavigator();
 
 export const BottomTabNavigator = () => {
 
-    const dispatch = useDispatch();
-
-    const _bottomTabBar = (props) => {
-        return (
-            <BottomTabBar
-            dispatch={dispatch}
-                {...props} />
-        )
-    }
 
     return (
         <Tab.Navigator
-            tabBar={_bottomTabBar}
+            tabBar={(props) => <BottomTabBar {...props} /> }
             tabBarOptions={{
                 showLabel: false,
                 activeTintColor: '#357ce6',

src/navigation/drawerNavigator.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { SideMenu } from "../components"
+import { BottomTabNavigator } from "./botomTabNavigator"
+
+// Constants
+import ROUTES from '../constants/routeNames';
+import { createDrawerNavigator } from "@react-navigation/drawer";
+
+
+const Drawer = createDrawerNavigator();
+
+export const DrawerNavigator = () => {
+
+    return (
+        <Drawer.Navigator drawerContent={(props) => <SideMenu {...props}/>} >
+            <Drawer.Screen name={ROUTES.SCREENS.FEED} component={BottomTabNavigator} />
+        </Drawer.Navigator>
+    )
+}

src/navigation/navigation.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
 
 import { NavigationContainer } from '@react-navigation/native';
-import { createDrawerNavigator } from '@react-navigation/drawer';
 import { createStackNavigator } from '@react-navigation/stack';
 
 // Constants
 import ROUTES from '../constants/routeNames';
 
-// Components
-import { SideMenu } from '../components';
 
 // Screens
 import {
@@ -38,25 +35,17 @@ import {
   CoinDetails,
   EditHistoryScreen,
 } from '../screens';
+import { DrawerNavigator } from './drawerNavigator';
 import { BottomTabNavigator } from './botomTabNavigator';
 
 
 const Stack = createStackNavigator();
-const Drawer = createDrawerNavigator();
 
 
 
-const mainNavigation = (
-  <Drawer.Navigator>
-    <Drawer.Screen name={ROUTES.SCREENS.FEED} component={BottomTabNavigator} />
-
-    <Drawer.Screen name="contentComponent" component={SideMenu} />
-  </Drawer.Navigator>
-);
-
 const StackNavigator = (
   <Stack.Navigator headerMode="none">
-    <Stack.Screen name={ROUTES.DRAWER.MAIN} component={mainNavigation} />
+    <Stack.Screen name={ROUTES.DRAWER.MAIN} component={DrawerNavigator} />
     <Stack.Screen name={ROUTES.DRAWER.PROFILE} component={Profile} />
     <Stack.Screen name={ROUTES.DRAWER.PROFILE_EDIT} component={ProfileEdit} />
     <Stack.Screen
@@ -95,6 +84,6 @@ const StackNavigator = (
 
 export const initAppNavigation = () => (
   <NavigationContainer>
-    {mainNavigation}
+    <DrawerNavigator />
   </NavigationContainer>
 )