title: Reset react navigation stack history
body: <p><strong>Update</strong></p>
  
  <p>Changed to use <code>DrawerNavigator</code> as the <em>root</em> for now, but would still like to know if it's possible to use <code>StackNavigator</code> as root but behavior like <code>tabs</code>, or <code>drawers</code>.</p>
  
  <hr>
  
  <p>Am using reactnavigation v5.</p>
  
  <p>I have the following setup:</p>
  
  <pre><code>&lt;RootStack.Navigator initialRouteName={'SplashNavigator'}&gt;
    &lt;RootStack.Screen name={'SplashNavigator'} component={SplashStackNavigator} options={{headerShown: false}} /&gt;
    &lt;RootStack.Screen name={'DrawerNavigator'} component={DrawerNavigator} /&gt;
  &lt;/RootStack.Navigator&gt;
  </code></pre>
  
  <p>From <code>SplashNavigator</code> I do a <code>navigation.navigate('DrawerNavigator', {screen:'Home'})</code></p>
  
  <p>However, the header has a back button that navigates back to the splash screen.<br>
  Is there a way to reset the history so it'll take the <code>DrawerNavigator</code> as the main navigator?</p>
  
  <p>Have tried <code>StackActions.replace</code> in HomeScreen but somehow it doesn't recognise the screen.</p>
  
  <pre><code>const HomeScreen = ({navigation}) =&gt; {
    useEffect(() =&gt; {
      navigation.dispatch(state =&gt; {
        console.log(state);
        return StackActions.replace('Home')
      });
    }, []);
    ...
  </code></pre>
  
  <pre><code>ExceptionsManager.js:173 The action 'REPLACE' with payload {"name":"Home"} was not handled by any navigator. 
  </code></pre>
  
  <p>Yet I do see the route in the state</p>
  
  <pre><code>  "routeNames": [
      "Home",
      "Promotions"
    ],
  </code></pre>
  
  <p>Have tried <code>CommonActions.reset()</code> too but it didn't change anything.</p>
  
  <pre><code>const HomeScreen = ({navigation}) =&gt; {
    useEffect(() =&gt; {
      navigation.dispatch(state =&gt; {
        console.log(state);
        return CommonActions.reset({...state, key:null})
      });
  </code></pre>