React Native Hooks (Expo) and Navigation v5 - Splash + Auth + Drawer + Tabs (https://www.youtube.com/watch?v=nQVCkqvU1uE&t)

App.js

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>
  )
}

context.js

import React from 'react';

export const AuthContext = React.createContext();

Screens.js

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',
  },
});