Root.js

import {Button, Icon} from 'native-base';
import React, {PureComponent} from 'react';
import {I18nManager, View} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {connect} from 'react-redux';
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 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 Settings from './screens/list';
import changePassword from './screens/list/changePassword';
import offlineContent from './screens/offlineContent/index';
import Player from './screens/player/index';
import SideBar from './screens/sidebar';

class AppTest extends PureComponent {
  render() {
    const LoginTabs = createBottomTabNavigator(
      {
        Home: {
          screen: Home,
          navigationOptions: {
            tabBarLabel: 'home',
          },
        },
        Browse: {
          screen: Browse,
          navigationOptions: {
            tabBarLabel: 'browse',
          },
        },
        Search: {
          screen: Search,
          navigationOptions: {
            tabBarLabel: 'search',
            headerShown: false,
          },
        },
        Radio: {
          screen: Radio,
          navigationOptions: {
            tabBarLabel: 'radio',
          },
        },

        Library: {
          screen: YourLibrary,
          navigationOptions: {
            tabBarLabel: 'library',
          },
        },
      },
      {
        swipeEnabled: true,
        lazy: false,

        defaultNavigationOptions: ({navigation}) => ({
          headerLeft: (
            <View>
              <Button
                transparent
                onPress={() => navigation.navigate('DrawerOpen')}>
                <Icon name="menu" />
                {/* <Icon name="menu" style={styles.styles} /> */}
              </Button>
            </View>
          ),
          tabBarIcon: ({focused, tintColor}) => {
            const {routeName} = navigation.state;
            let iconName;
            if (routeName === 'Home') {
              iconName = 'ios-home';
            } else if (routeName === 'Browse') {
              iconName = 'ios-globe';
            } else if (routeName === 'Radio') {
              iconName = 'ios-radio';
            } else if (routeName === 'Library') {
              iconName = 'ios-albums';
            } else if (routeName === 'Search') {
              iconName = 'ios-search';
            }
            return <Ionicons name={iconName} size={25} color={tintColor} />;
          },
        }),
        tabBarOptions: {
          style: {
            // borderTopColor: 'transparent',
            backgroundColor: '#fff',
            flexDirection: `${I18nManager.isRTL ? 'row' : 'row-reverse'}`,
          },
          activeTintColor: '#ff4865',
        },
      },
    );

    const NotLoginTabs = createBottomTabNavigator(
      {
        Home: {
          screen: Home,
          navigationOptions: {
            tabBarLabel: 'Home',
          },
        },
        Browse: {
          screen: Browse,
          navigationOptions: {
            tabBarLabel: 'Browse',
          },
        },
        Search: {
          screen: Search,
          navigationOptions: {
            tabBarLabel: 'search',
            headerShown: false,
          },
        },
        Radio: {
          screen: Radio,
          navigationOptions: {
            tabBarLabel: 'radio',
          },
        },
      },
      {
        swipeEnabled: true,
        lazy: false,
        // navigatorStyle: {
        //   statusBarTextColorScheme: 'light',
        //   statusBarColor: '#222325',
        // },
        defaultNavigationOptions: ({navigation}) => ({
          headerLeft: (
            <View>
              <Button
                transparent
                onPress={() => navigation.navigate('DrawerOpen')}>
                {/* <Icon name="menu" style={styles.styles} /> */}
                <Icon name="menu" />
              </Button>
            </View>
          ),
          tabBarIcon: ({focused, tintColor}) => {
            const {routeName} = navigation.state;
            let iconName;
            if (routeName === 'Home') {
              iconName = 'ios-home';
            } else if (routeName === 'Browse') {
              iconName = 'ios-globe';
            } else if (routeName === 'Radio') {
              iconName = 'ios-radio';
            } else if (routeName === 'Library') {
              iconName = 'ios-albums';
            } else if (routeName === 'Search') {
              iconName = 'ios-search';
            }
            return <Ionicons name={iconName} size={25} color={tintColor} />;
          },
        }),
        tabBarOptions: {
          style: {
            // borderTopColor: 'transparent',
            backgroundColor: '#fff',
            flexDirection: `${I18nManager.isRTL ? 'row' : 'row-reverse'}`,
          },
          activeTintColor: '#ff4865',
        },
      },
    );

    const AppNavigator = createStackNavigator(
      {
        TabHome: {
          screen: this.props.isLogin ? LoginTabs : NotLoginTabs,
          navigationOptions: ({navigation}) => {
            let {routeName} = navigation.state.routes[navigation.state.index];
            let title;
            if (routeName === 'Home') {
              title = 'Home';
            } else if (routeName === 'Browse') {
              title = 'Browse';
            } else if (routeName === 'Search') {
              title = 'Search';
            } else if (routeName === 'Radio') {
              title = 'Radio';
            } else if (routeName === 'Library') {
              title = 'Library';
            }
            return {
              title,
            };
          },
        },

        Register: {
          screen: Register,
          navigationOptions: () => ({
            drawerLockMode: 'locked-closed',
          }),
        },
        googleAuth: {
          screen: googleAuth,
          navigationOptions: () => ({
            drawerLockMode: 'locked-closed',
          }),
        },
        Login: {
          screen: Login,
          navigationOptions: () => ({
            drawerLockMode: 'locked-closed',
          }),
        },
        UploadSong: {screen: UploadSong},
        Profile: {screen: Profile},
        AllArtists: {screen: AllArtists},
        Album: {screen: Album},
        Genre: {screen: Genre, navigationOptions: {headerShown: false}},
        offlineContent: {screen: offlineContent},
        changePassword: {screen: changePassword},
        Player: {screen: Player},
        Artist: {screen: Artist},
        AllSongs: {
          screen: AllSongs,
         
      },
      {
        initialRouteName: 'TabHome',
        mode: 'modal',
        defaultNavigationOptions: ({navigation}) => ({
          headerStyle: {
            backgroundColor: '#fff',
          },
          headerTintColor: '#ff4865',
          headerTitleAlign: 'center',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
          headerLeft: () => {
            const {routeName} = navigation.state;
            let headerButton;
            // eslint-disable-next-line eqeqeq
            if (routeName != 'Search') {
              headerButton = (
                <View>
                  <Button transparent onPress={() => navigation.openDrawer()}>
                    <Icon name="menu" style={styles.white} />
                  </Button>
                </View>
              );
            }
            return headerButton;
          },
        }),
      },
    );

    const Drawer = createDrawerNavigator(
      {
        App: {screen: AppNavigator},
        Home: {screen: Home},
        Login: {
          screen: Login,
          navigationOptions: () => ({
            drawerLockMode: 'locked-closed',
          }),
        },
        Settings: {screen: Settings},
        offlineContent: {
          screen: offlineContent,
          contentOptions: {
            activeBackgroundColor: 'red',
            inactiveBackgroundColor: 'green',
            activeTintColor: 'blue',
          },
        },
        Register: {screen: Register},
        // Tab: {screen: LoginTabs}, // If anything not work in drawer check this F*
      },
      {
        initialRouteName: 'App',
        contentOptions: {
          activeTintColor: '#e91e63',
          activeBackgroundColor: 'purple',
        },
        mode: 'modal',
        drawerLockMode: 'locked-closed',
        drawerPosition: I18nManager.isRTL ? 'right' : 'left',
        contentComponent: props => <SideBar {...props} />,
        
      },
    );
    const styles = {
      white: {
        color: '#ff4865',
      },
    };

    const Navigations = createSwitchNavigator({
      App: Drawer, // the App stack,
    });

    const Final = createAppContainer(Navigations);
    return <Final />;
  }
}

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

export default connect(mapStateToProps)(AppTest);