I want to access an authenticated screen from a deep-link using react navigation v5 with expo. So I followed the authentication flow from react navigation and I ended with a start up navigator like that :
const StartupNavigator = (props: Partial<StackNavigatorProps>): ReactElement => {
const {startUp} = useStartUp();
const renderStacks = () => {
if (startUp.isReady) {
return <Stack.Screen name={Routes.HOME} component={BottomTabNavigator}/>;
}
if (startUp.isLoading) {
return <Stack.Screen name={Routes.CHECK} component={CheckScreen}/>;
}
if (startUp.isBuilding) {
return <Stack.Screen name={Routes.BUILD} component={BuildScreen}/>;
}
if (startUp.isAuthentifying) {
return <Stack.Screen name={Routes.AUTH} component={AuthNavigator}/>;
}
};
return (
<Stack.Navigator {...props} headerMode={"none"}>
{renderStacks()}
</Stack.Navigator>
);
};
So I have 4 initial state :
- isReady : The user is authenticated, and can access protected screens.
- isLoading: First state when opening the app, check the app
version..... then set the
isAuthentifyingstate - isAuthentifying: The authentication navigator for registering, and login.
- isBuilding: After authentication, fetch the user information, then set the state to
isReady
Note, when opening the app, the state is set by default to isLoading
Then, I made an NavigationContainer following this link for handling deep-linking
How to redirect to an authenticated screen passing by the authentication (note that I don't have an auto login process)