Root.js

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Button, Icon} from 'native-base';
import React from 'react';
import {I18nManager, View} from 'react-native';
import {connect} from 'react-redux';
import TabBar from './component/commons/TabBar';
import Album from './screens/album/index';
import AllArtists from './screens/anatomy/AllArtists/AllArtists';
import Browse from './screens/anatomy/browse/browse';
import Genre from './screens/anatomy/browse/Genre';
import Home from './screens/anatomy/home/home';
import Profile from './screens/anatomy/MyProfile/Profile';
import Radio from './screens/anatomy/radio/radio';
import Search from './screens/anatomy/search/search';
import UploadSong from './screens/anatomy/uploadSongs/UploadSong';
import YourLibrary from './screens/anatomy/YourLibrary/yourLibrary';
import PlaylistDetails from './screens/anatomy/YourPlaylist/PlaylistDetails';
import AllSongs from './screens/artist/AllSongs';
import Artist from './screens/artist/index';
// Auth
import Login from './screens/form';
import googleAuth from './screens/form/googleAuth';
import Register from './screens/form/register';
import changePassword from './screens/list/changePassword';
import Player from './screens/player/index';
import SideBar from './screens/sidebar';




function BottomTab({isLogin}) {
  console.log('BottomTab-isLogin?!?', isLogin);  // get undefined 'not work'
  const BottomTab = createBottomTabNavigator();
  return (
    <BottomTab.Navigator
      lazy={false}
      tabBar={props => <TabBar {...props} />}
      screenOptions={({route}) => console.log('route', route)}
      tabBarOptions={{
        showLabel: true,
      }}
      options={{
        style: {
          flexDirection: `${I18nManager.isRTL ? 'row' : 'row-reverse'}`,
        },
      }}>
      <BottomTab.Screen
        name="Home"
        component={Home}
        options={{title: 'الرئيسية'}}
      />
      <BottomTab.Screen
        name="Browse"
        component={Browse}
        options={{title: 'الأقسام'}}
      />
      <BottomTab.Screen
        name="Search"
        component={Search}
        options={{title: 'البحث'}}
      />
      <BottomTab.Screen
        name="Radio"
        component={Radio}
        options={{title: 'البومات'}}
      />
      {isLogin && (
        <BottomTab.Screen
          name="Library"
          component={YourLibrary}
          options={{title: 'مكتبتي', headerTitleStyle: {color: '#ffffff'}}}
        />
      )}
    </BottomTab.Navigator>
  );
}



function customNavigator({navigation, isLogin}) {
  console.log('customNavigator', isLogin); // get undefined 'not work'
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator
      initialRouteName="BottomTabNavigator"
      screenOptions={{
        title: 'Arabic Rap',
        headerTitleAlign: 'center',
        headerStyle: {backgroundColor: '#151515'},
        headerLeft: () => (
          <View>
            <Button
              transparent
              onPress={
                () => navigation.openDrawer()
                // navigation.dispatch(DrawerActions.openDrawer())
              }>
              <Icon name="menu" style={{color: '#ebff64'}} />
            </Button>
          </View>
        ),
        headerTintColor: '#ebff64',
        headerTitleStyle: {
          // fontWeight: 'bold',
          fontFamily: 'Changa-Variable',
        },
      }}>
      <Stack.Screen
        isLogin={isLogin}
        name="BottomTabNavigator"
        component={BottomTab}
      />
      <Stack.Screen name="UploadSong" component={UploadSong} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="AllArtists" component={AllArtists} />
      <Stack.Screen name="Album" component={Album} />
      <Stack.Screen name="PlaylistDetails" component={PlaylistDetails} />
      <Stack.Screen
        name="Genre"
        component={Genre}
        options={{headerShown: false}}
      />
      <Stack.Screen name="Player" component={Player} />
      <Stack.Screen
        options={{headerShown: false}}
        name="Artist"
        component={Artist}
      />
      <Stack.Screen name="AllSongs" component={AllSongs} />
      {/* Auth */}
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Register" component={Register} />
      <Stack.Screen name="GoogleAuth" component={googleAuth} />
      <Stack.Screen name="ChangePassword" component={changePassword} />
    </Stack.Navigator>
  );
}


function AppNavigator({isLogin}) {
  console.log('AppNavigator-darwer', isLogin); // get false 'works'
  const Drawer = createDrawerNavigator();
  return (
    <Drawer.Navigator
      initialRouteName="StackNavigator"
      drawerContent={props => <SideBar {...props} />}
      drawerType="front"
      screenOptions={{
        //   gestureEnabled: false, // == drawerLockMode
        drawerIcon: ({tintColor}) => (
          <Icon
            name="home"
            paddingLeft={8}
            color="#00f"
            width={30}
            size={25}
            style={{color: tintColor}}
          />
        ),
      }}
      drawerPosition={I18nManager.isRTL ? 'right' : 'left'}>
      <Drawer.Screen
        name="StackNavigator"
        isLogin={isLogin}
        component={customNavigator}
      />
    </Drawer.Navigator>
  );
}


const Root = ({isLogin}) => {
  return (
    <NavigationContainer>
      <AppNavigator isLogin={isLogin} />
    </NavigationContainer>
  );
};

const mapStateToProps = state => {
  return {
    isLogin: state.user.isLogin,
  };
};

export default connect(mapStateToProps)(Root);