Structuring an auth flow in React Navigation
navigator structuring around auth state.
conditionally render an auth stack versus app stack from state, not navigate calls; store token; let state drive screens.
navigating between stacks manually instead of swapping them.
What's really being asked
Whether you understand that React Navigation is declarative: the screens that exist should be a function of auth state, not the result of imperative navigate calls. The interviewer wants to see clean separation between unauthenticated and authenticated experiences.
The full answer
Keep an isSignedIn or token value in context, Redux, or Zustand. Inside a single Stack navigator, conditionally render either the auth screens (Login, SignUp, ForgotPassword) or the app screens (the bottom-tab navigator) based on that value. When the token changes, React Navigation mounts the new group and unmounts the old one, so no manual navigation is needed. Persist the token in secure storage, and show a loading splash while you rehydrate it on cold start to avoid flashing the login screen.
The mistakes people make
Always rendering both stacks and calling navigation.navigate('Home') after login, which leaves the login screen on the back stack. Using navigation.reset everywhere to paper over that. Storing tokens in plain AsyncStorage or component state that is lost on restart. Forgetting the rehydration splash, causing a login flash for already-signed-in users.
What usually comes next
How do you handle token refresh and 401 responses globally? Where do you put the logout call so all protected state clears? How do you deep link into a protected screen when the user is not yet signed in?
A concrete example
In the root component you read token from your store. You return a NavigationContainer wrapping a Stack. If token is null you render Stack.Screen entries for Login and SignUp; otherwise you render a single Stack.Screen whose component is your Tab navigator. On successful login you simply call setToken(value); the conditional re-evaluates and the auth stack disappears. On logout you setToken(null) and clear secure storage, and the user lands back on Login with no protected screens reachable.
Interview question
Why is conditionally rendering separate auth and app stacks preferred over calling navigation.navigate after login?
- a.It avoids needing to persist the auth token anywhere
- b.It lets back navigation return to the login screen for convenience
- c.State drives which screens exist, so the old stack is unmounted and unreachableCorrect
- d.navigate is deprecated in modern React Navigation versions
Why? this is the answer
Declarative conditional rendering ties screen existence to auth state, automatically unmounting unreachable stacks. The navigate approach leaves the login screen on the back stack, which is exactly the bug to avoid.
Just read this? Test yourself on what you have been reading.
Read the original → reactnavigation.org
- #react-native
- #react-navigation
- #authentication
- #navigation
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles