createSwitchNavigator with React Navigation v5?

Question

I my old version I make something like this: going to splash screen, if user is connected go to App, else go to login.

And I can navigate into screen by using this.props.navigation.navigate("Register")

SplashScreen.js:

    componentDidMount(){
        firebase.auth().onAuthStateChanged(user => {
            this.props.navigation.navigate(user ? "App" : "Login")
        });
    }

in App.js

const Container = createAppContainer(
    createSwitchNavigator(
        {
            Splash: SplashScreen,
            Login: LoginScreen,
            Register: RegisterScreen,
            App: AppContainer,
        },
        {
            initialRouteName: "Splash",
        }
    )
);

//Other code

    render(){
        return (<Container/>)
    }

Now I try to use react Navigation v5 but everything seem to be more complicated.

My App.js look like this:

export default function App() {
    const [isDarkTheme, setIsDarkTheme] = React.useState(false);

    const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme; // Use Light/Dark theme based on a state

    function toggleTheme() {
        // We will pass this function to Drawer and invoke it on theme switch press
        setIsDarkTheme(isDark => !isDark);
    }

    return (
        <PaperProvider theme={theme}>
            <NavigationContainer theme={theme}>
                <Drawer.Navigator
                    drawerContent={props => <DrawerContent {...props} toggleTheme={toggleTheme}/>}
                >
                    <Drawer.Screen
                        name="HomeDrawer"
                        component={MainTabScreen}
                    />
                    <Drawer.Screen
                        name="SettingsScreen"
                        component={SettingsStackScreen}
                    />
                </Drawer.Navigator>
            </NavigationContainer>
        </PaperProvider>
    );
}

How I'm suppose to do something like this but with PaperProvider ?

Answer 1

You could simply do your API Call and depending on the result, display or not the routes. Something like:

import { useEffect } from 'react';

export default function App() {
  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
  const [isAuthed, setIsAuthed] = React.useState(false);

  useEffect(async () => setIsAuthed(await getIsAuthed()));

  const theme = isDarkTheme ? CombinedDarkTheme : CombinedDefaultTheme; // Use Light/Dark theme based on a state

  function toggleTheme() {
    // We will pass this function to Drawer and invoke it on theme switch press
    setIsDarkTheme((isDark) => !isDark);
  }

  const defineRoutes = () => {
    if (!isAuthed) {
      return <Drawer.Screen name='Login' component={Login} /> // Don't know your login comp name, but you got the idea
    }

    // Don'tknow if Fragment exists on react native and is usable here, just try
    return (
      <Fragment>
        <Drawer.Screen name='HomeDrawer' component={MainTabScreen} />
        <Drawer.Screen name='SettingsScreen' component={SettingsStackScreen} />
      </Fragment>
    );
  };

  return (
    <PaperProvider theme={theme}>
      <NavigationContainer theme={theme}>
        <Drawer.Navigator
          drawerContent={(props) => (
            <DrawerContent {...props} toggleTheme={toggleTheme} />
          )}
        >
          {defineRoutes()}
        </Drawer.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}