Last active
February 6, 2022 15:42
-
-
Save nwatab/e374a63e2f99ede0d73d921e91cf47ea to your computer and use it in GitHub Desktop.
React Native Hooks (Expo) and Navigation v5 - Splash + Auth + Drawer + Tabs (https://www.youtube.com/watch?v=nQVCkqvU1uE&t)
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 React, {useState, useEffect} from 'react'; | |
import { NavigationContainer } from '@react-navigation/native'; | |
import { createStackNavigator } from '@react-navigation/stack'; | |
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; | |
import { createDrawerNavigator } from "@react-navigation/drawer"; | |
import { Splash, SignIn, CreateAccount, Details, Home, Search, Search2, Profile} from './Screens'; | |
import { AuthContext } from './context'; | |
const AuthStack = createStackNavigator(); | |
const AuthStackScreen = () => ( | |
<AuthStack.Navigator> | |
<AuthStack.Screen | |
name='SignIn' | |
component={SignIn} | |
options={{ title: 'Sign In' }} | |
/> | |
<AuthStack.Screen | |
name='CreateAccount' | |
component={CreateAccount} | |
options={{ title: 'Create Account' }} | |
/> | |
</AuthStack.Navigator> | |
) | |
const HomeStack = createStackNavigator(); | |
const HomeStackScreen = () => ( | |
<HomeStack.Navigator> | |
<HomeStack.Screen name="Home" component={Home} /> | |
<HomeStack.Screen | |
name="Details" | |
component={Details} | |
options={({route}) => ({title: route.params.name})} | |
/> | |
</HomeStack.Navigator> | |
) | |
const SearchStack = createStackNavigator(); | |
const SearchStackScreen = () => ( | |
<SearchStack.Navigator> | |
<SearchStack.Screen name="Profile" component={Search} /> | |
<SearchStack.Screen name="Search2" component={Search} /> | |
</SearchStack.Navigator> | |
) | |
const ProfileStack = createStackNavigator(); | |
const ProfileStackScreen = () => ( | |
<ProfileStack.Navigator> | |
<ProfileStack.Screen name="Profile" component={Profile} /> | |
</ProfileStack.Navigator> | |
) | |
const Tabs = createBottomTabNavigator(); | |
const TabsScreen = () => ( | |
<Tabs.Navigator> | |
<Tabs.Screen name="Home" component={HomeStackScreen} /> | |
<Tabs.Screen name="Search" component={SearchStackScreen} /> | |
</Tabs.Navigator> | |
) | |
const Drawer = createDrawerNavigator(); | |
const DrawerScreen = () => ( | |
<Drawer.Navigator initialRouteName='Profile'> | |
<Drawer.Screen name='Home' component={TabsScreen} /> | |
<Drawer.Screen name='Profile' component={ProfileStackScreen} /> | |
</Drawer.Navigator> | |
) | |
const RootStack = createStackNavigator(); | |
const RootStackScreen = ({ userToken }) => ( | |
<RootStack.Navigator headerMode='none'> | |
{userToken ? ( | |
<RootStack.Screen | |
name="App" | |
component={DrawerScreen} | |
options={{animationEnabled: false }} | |
/> | |
) : ( | |
<RootStack.Screen | |
name="Auth" | |
component={AuthStackScreen} | |
options={{animationEnabled: false }} | |
/> | |
)} | |
</RootStack.Navigator> | |
) | |
export default () => { | |
const [isLoading, setIsLoading] = useState(true); | |
const [userToken, setUserToken] = useState(null); | |
const authContext = React.useMemo(() => { | |
return { | |
signIn: () =>{ | |
setIsLoading(false); | |
setUserToken('asdf'); | |
}, | |
signUp: () => { | |
setIsLoading(false); | |
setUserToken('asdf'); | |
}, | |
signOut: () => { | |
setIsLoading(false); | |
setUserToken(null); | |
} | |
} | |
}, []); | |
useEffect(() => { | |
setTimeout(() =>{ | |
setIsLoading(false) | |
}, 1000) | |
}, []) | |
if (isLoading) { | |
return <Splash /> | |
} | |
return ( | |
<AuthContext.Provider value={authContext}> | |
<NavigationContainer> | |
<RootStackScreen userToken={userToken}/> | |
</NavigationContainer> | |
</AuthContext.Provider> | |
) | |
} |
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 React from 'react'; | |
export const AuthContext = React.createContext(); |
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 React, {useContext} from 'react'; | |
import {StyleSheet, Text, Button, View} from'react-native'; | |
import { AuthContext } from './context'; | |
export const Splash = () => ( | |
<ScreenContainer> | |
<Text>Loading ...</Text> | |
</ScreenContainer> | |
) | |
export const SignIn = ({ navigation }) => { | |
const { signIn } = useContext(AuthContext) | |
return ( | |
<ScreenContainer> | |
<Text>Sign In Screen</Text> | |
<Button title='Sign In' onPress={() => signIn()} /> | |
<Button | |
title="Create Account" | |
onPress={() => navigation.push('CreateAccount')} | |
/> | |
</ScreenContainer> | |
) | |
} | |
export const CreateAccount = () => { | |
const { signUp } = useContext(AuthContext); | |
return ( | |
<ScreenContainer> | |
<Text>Create Account Screen</Text> | |
<Button title='Sign Up' onPress={() => signUp()} /> | |
</ScreenContainer> | |
) | |
} | |
const ScreenContainer = ({ children }) => ( | |
<View style={styles.container}>{children}</View> | |
); | |
export const Home = ({ navigation }) => ( | |
<ScreenContainer> | |
<Text>Master List Screen</Text> | |
<Button | |
title='React Native by Example' | |
onPress={() => navigation.push('Details', {name: 'React Native by Example'})} | |
/> | |
<Button | |
title='React Native School' | |
onPress={() => navigation.push('Details', {name: 'React Native School'})} | |
/> | |
<Button title="Drawer" onPress={() => navigation.toggleDrawer()} /> | |
</ScreenContainer> | |
) | |
export const Details = ({ route }) => ( | |
<ScreenContainer> | |
<Text>Details Screen</Text> | |
{ route.params.name && <Text>{route.params.name}</Text>} | |
</ScreenContainer> | |
) | |
export const Search = ({ navigation }) => ( | |
<ScreenContainer> | |
<Text>Search Screen</Text> | |
<Button title="Search 2" onPress={() => navigation.push('Search2')} /> | |
<Button | |
title='ReactNative School' | |
onPress={() => { | |
navigation.navigate('Profile'),{ | |
screen: "Details", | |
params: {name: 'React Native School'} | |
}} | |
} | |
/> | |
</ScreenContainer> | |
) | |
export const Profile = ({ navigation }) => { | |
const { signOut } = useContext(AuthContext) | |
return ( | |
<ScreenContainer> | |
<Text>Profile Screen</Text> | |
<Button title="Drawer" onPress={() => navigation.toggleDrawer()} /> | |
<Button title="Sign Out" onPress={() => signOut()} /> | |
</ScreenContainer> | |
) | |
} | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
backgroundColor: '#fff', | |
alignItems: 'center', | |
justifyContent: 'center', | |
}, | |
}); |
Author
nwatab
commented
Apr 23, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment