Config.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 SideBar from './screens/sidebar';

const HomeStack = createStackNavigator();
function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        options={{headerShown: false}}
        name="Home"
        component={Home}
      />
      <HomeStack.Screen
        options={{headerShown: false}}
        name="AllSongs"
        component={AllSongs}
      />
      <HomeStack.Screen
        options={{headerShown: false}}
        name="Album"
        component={Album}
      />
      <HomeStack.Screen
        options={{headerShown: false}}
        name="Artist"
        component={Artist}
      />
      <HomeStack.Screen
        options={{headerShown: false}}
        name="AllArtists"
        component={AllArtists}
      />
    </HomeStack.Navigator>
  );
}

const GenreStack = createStackNavigator();
function GenreStackScreen() {
  return (
    <GenreStack.Navigator>
      <GenreStack.Screen
        name="Browse"
        component={Browse}
        options={{headerShown: false}}
      />
      <GenreStack.Screen
        name="Genre"
        component={Genre}
        options={{headerShown: false}}
      />
    </GenreStack.Navigator>
  );
}

const RadioStack = createStackNavigator();
function RadioStackScreen() {
  return (
    <RadioStack.Navigator>
      <RadioStack.Screen
        name="Browse"
        component={Radio}
        options={{headerShown: false}}
      />
      <RadioStack.Screen
        name="Album"
        component={Album}
        options={{headerShown: false}}
      />
    </RadioStack.Navigator>
  );
}

const YourLibraryStack = createStackNavigator();
function YourLibraryStackScreen() {
  return (
    <YourLibraryStack.Navigator>
      <YourLibraryStack.Screen
        name="Library"
        component={YourLibrary}
        options={{headerShown: false}}
      />
      <YourLibraryStack.Screen
        name="PlaylistDetails"
        component={PlaylistDetails}
        options={{headerShown: false}}
      />
    </YourLibraryStack.Navigator>
  );
}

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

const Stack = createStackNavigator();
function customNavigator({navigation, isLogin}) {
  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={BottomTabs}
      />
      <Stack.Screen name="UploadSong" component={UploadSong} />
      <Stack.Screen name="Profile" component={Profile} />

      {/* 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>
  );
}

const Drawer = createDrawerNavigator();
function AppNavigator({isLogin}) {
  console.log('isLogin++++++++', isLogin); // (works) get expected "false/true"
  return (
    <Drawer.Navigator
      initialRouteName="StackNavigator"
      drawerContent={props => <SideBar {...props} />}
      drawerType="front"
      screenOptions={{
        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" component={customNavigator} />
      <Drawer.Screen
        isLogin={isLogin}
        name="BottomTabs"
        component={BottomTabs}
      />
    </Drawer.Navigator>
  );
}

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

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

export default connect(mapStateToProps)(Root);