Created
March 31, 2020 00:13
-
-
Save anastely/a644b308ac9997ee30917bd65d4cc2ac to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment