RootConfig.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';

// custom TabBar
import TabBar from './component/commons/TabBar';

// all app screens
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';





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



const Root = ({isLogin}) => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="App"
        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">
          {({navigation}) => (
            <Stack.Navigator
              initialRouteName="BottomTabNavigator"
              screenOptions={{
                title: 'Arabic Rap',
                headerTitleAlign: 'center',
                headerStyle: {backgroundColor: '#151515'},
                headerLeft: () => (
                  <View>
                    <Button
                      transparent
                      onPress={
                        () => navigation.openDrawer()
                      }>
                      <Icon name="menu" style={{color: '#ebff64'}} />
                    </Button>
                  </View>
                ),

                headerTintColor: '#ebff64',
              }}>
              <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: 'Home',
                        }}
                      />
                      <BottomTab.Screen
                        name="Browse"
                        component={Browse}
                        options={{title: 'Browse'}}
                      />
                      <BottomTab.Screen
                        name="Search"
                        component={Search}
                        options={{
                          title: 'Search',
                        }}
                      />
                      <BottomTab.Screen
                        name="Radio"
                        component={Radio}
                        options={{title: 'Radio'}}
                      />
                      {isLogin && (
                        <BottomTab.Screen
                          name="Library"
                          component={YourLibrary}
                          options={{
                            title: 'Library',
                          }}
                        />
                      )}
                    </BottomTab.Navigator>
                  </>
                )}
              </Stack.Screen>
            </Stack.Navigator>
          )}
        </Drawer.Screen>
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

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

export default connect(mapStateToProps)(Root);