Re-Edit.js

const Drawer = createDrawerNavigator();
const AppDrawerScreen = () => (
  <Drawer.Navigator
    initialRouteName="App"
    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 component={AppScreens} name="StackNavigator" />
  </Drawer.Navigator>
);

const Stack = createStackNavigator();
const AppScreens = ({navigation}) => (
  console.log('navigation', navigation),
  (
    <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
        options={{
          headerShown: false,
        }}
        name="Login"
        component={Login}
      />
      <Stack.Screen
        options={{
          headerShown: false,
        }}
        name="Register"
        component={Register}
      />
      <Stack.Screen name="GoogleAuth" component={googleAuth} />
      <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="ChangePassword" component={changePassword} />
      <Stack.Screen name="Player" component={Player} />
      <Stack.Screen
        options={{
          headerShown: false,
        }}
        name="Artist"
        component={Artist}
      />
      <Stack.Screen name="AllSongs" component={AllSongs} />

      <Stack.Screen component={BottomTabsScreen} name="BottomTabNavigator" />
    </Stack.Navigator>
  )
);

const BottomTab = createBottomTabNavigator();
const BottomTabsScreen = ({isLogin}) => {
  return (
    <BottomTab.Navigator
      lazy={false}
      tabBar={props => <TabBar {...props} />}
      // screenOptions={
      // props => console.log('route', props)
      // {
      //   tabBarVisible: ({routes}) => {
      //     let tabBarVisible = false;
      //     console.log('screens', routes);
      //     return {tabBarVisible};
      //   },
      // }
      // }
      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: 'البومات'}}
      />
      {console.log('isLogin', isLogin)}
      {isLogin && (
        <BottomTab.Screen
          name="Library"
          component={YourLibrary}
          options={{
            title: 'مكتبتي',
            headerTitleStyle: {color: '#ffffff'},
          }}
        />
      )}
    </BottomTab.Navigator>
  );
};

const Root = ({isLogin}) => {
  return (
    <NavigationContainer>
// When i navigate to other screen from tabs i got this error `The action 'NAVIGATE' was not handled by any navigator.
Do you have a screen named 'Artist'?`
      <BottomTabsScreen isLogin={isLogin}> 
        <AppDrawerScreen />
      </BottomTabsScreen>
    </NavigationContainer>
  );
};

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

export default connect(mapStateToProps)(Root);

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';
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';
/*  ADVICES:
    - try to give screen components a more specific name like "Register" -> "RegisterScreen"
    - consistent naming -> all Components in CamelCase / folders always in pascalCase
    - Don't use prefixes like "My..." or "Your..." for naming anything, this gives no extra information
    - I think its not neccesary to have a ScreenTitle when you know where you are through the TabNavigatior

    NOT DONE:
    - drawerConfig differs from prevoius
    - tabsConfig differs from previous

    TODO:
    - refactor every static navigationOptions either to the corresponding Navigator or through useNavigation() hook (only in functionComponents)
    - refactor every this.props.navigation (if not working). Eventually transform from class to function component to use the useNavigation() hook
    - check every screen using navigation if it works correct
    - find a better way for the old "tabsConfig" in this component. remember that every navigator is now dymanic and can be changed always from inside and in its declaration

*/

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const BottomTab = createBottomTabNavigator();

// const SearchTopTabs = createStackNavigator({
//   SearchTabs: {
//     screen: SearchTabs,
//   },
// });

const Root = ({isLogin}) => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="App"
        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">
          {({navigation}) => (
            <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
                options={{
                  headerShown: false,
                }}
                name="Login"
                component={Login}
              />
              <Stack.Screen
                options={{
                  headerShown: false,
                }}
                name="Register"
                component={Register}
              />
              <Stack.Screen name="GoogleAuth" component={googleAuth} />
              <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="ChangePassword" component={changePassword} />
              <Stack.Screen name="Player" component={Player} />
              <Stack.Screen
                options={{
                  headerShown: false,
                }}
                name="Artist"
                component={Artist}
              />
              <Stack.Screen name="AllSongs" component={AllSongs} />

              <Stack.Screen name="BottomTabNavigator">
                {() => (
                    <BottomTab.Navigator
                      lazy={false}
                      tabBar={props => <TabBar {...props} />}
                      screenOptions={({route}) =>
                        // console.log('route', route),
                        ({
                          tabBarVisible: ({routes}) => {
                            let tabBarVisible = false;
                            console.log('screens', routes);
                            return {tabBarVisible};
                          },
                        })
                      }
                      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>
                )}
              </Stack.Screen>
            </Stack.Navigator>
          )}
        </Drawer.Screen>
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

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

export default connect(mapStateToProps)(Root);