Make a "tuto" / "registration" before the user can actually use the App

How to / Third Party Tooling
1

Hi! This is my first topic here, for my first Expo (and RN) app, and english isn’t my mother tongue (I am Français fromage baguette) so I might say some unintelligible crap :')

I would like to create a TabNavigator based app. No problem, I picked “tabbed app” during the “expo init” command. BUT, I also want my users to get through some sort of “registration” process before they can access the App. A set of screens like “Hey, tell me more about you”, “Provide your email adress” etc.

But I want this process to be without any tabs or header, so I created a simple App Navigator that I named “LaunchNavigator”. At the end of this process, I want the App to set the value of a local storage key to true, so the App never ask the user some blabla about itself again.

In order to do that, I wrote something like this in my App.js:

(this is a simplified version of my code)

if (!isInitDone) {
    return (
        <LaunchNavigator/> // "Hey, who are you ?"
    );
} else {
    return (
        <AppNavigator/> // (with tabs and header)
    );
}

I coded all the “registration” process, it works pretty well, it’s smooth and beautiful, but I have no idea of how to “kill” my LaunchNavigator to render my AppNavigator when the process is finished (without closing and re-opening the app obviously). So I googled “How to fully reload an Expo App”, and “How to access Expo root component”, and it seems that the answer is always: Do, Not, Do, That, Ever.

So I’m here to ask you: how do I do to have two differents… “navigation workflows” (?) within the same Expo app? And how to switch between one another?

Thank you very much, Expo community!
Peter.

2

The SwitchNavigator was made exactly for this purpose: https://reactnavigation.org/docs/en/switch-navigator.html

You can nest navigators in other navigators, so you can put a StackNavigator for your registration workflow in one route of the SwitchNavigator, while putting your logged-in TabNavigator in another route.

3

Like @llamaluvr says, use the SwitchNavigator .

react-navigation has a guide showing you exactly how to do this on their documentation site. Here’s is a link to that guide: Redirecting to https://reactnavigation.org/docs/auth-flow

Here’s a link to a runnable Snack example.