title: React Navigation 5, block back navigation after login
body: <p>I am using React Navigation 5 in a project, and I'm having trouble trying to block a user from navigating back after a certain point.</p>
  
  <p>The app uses a nested navigation structure similar to this:</p>
  
  <pre><code>ROOT (STACK)
  |-- LoginScreens (STACK - options={{ gestureEnabled: false }} )
  |   |-- Login (SCREEN) -&gt; when successful navigate to "Home"
  |   +-- Register (SCREEN) -&gt; after registration, navigate to "Login"
  |
  +-- Home (TABS - options={{ gestureEnabled: false }} )
      |-- BlahBlah (SCREEN)
      |-- MyProfile (SCREEN)
      +-- Dashboard (TABS)
          |-- AllTasks (SCREEN)
          +-- SomethingElse (SCREEN)
  </code></pre>
  
  <p>After a successful user login, the user is sent to the <code>Home</code> screen and should not be able to navigate back to the <code>LoginScreens</code> screen.</p>
  
  <p>I have tried to use the <code>componentDidMount</code> lifecycle method on <code>Home</code>, as well as the <code>useFocusEffect</code> hook, with the following:</p>
  
  <ul>
  <li>Placing a callback to React Native's <code>BackHandler</code>, returning true from the handler works (true means back action has been handled, no further back handlers will be called), but it will also block any back navigation within the screens in <code>Home</code> (e.g. I cannot navigate back from Dashboard to MyProfile).</li>
  <li>Using <code>navigation.reset({ index: 1, routes: [{ name: "Home" }] })</code>. Without <code>index: 1</code> the navigation just goes back to ROOT's initialRoute (in this case, <code>LoginScreens</code>). With <code>index: 1</code>, a <code>Maximum update depth exceeded</code> error is thrown.</li>
  <li>Instead navigating directly to <code>Home</code>, I have tried using a <code>navigation.reset()</code> (note: no params, clears the entire navigation history), and after that navigate to the <code>Home</code> screen. This doesn't achieve the desired effect since the current route (ROOT's initialRoute, in this case: <code>LoginScreens</code>) is still pushed on the navigation history before navigating to <code>Home</code>.</li>
  <li>Combining navigation and reset calls in different ways, I have only managed to get JS angry and throw errors and exceptions at me.</li>
  </ul>
  
  <p>Aaaaand... I have ran out of ideas. Does anyone have any suggestions ?</p>