title: React Navigation: Navigate Back To Root using NavigationActions.reset, goBack and getStateForAction
body: <p>Say I've navigated through 4 screens in my StackNavigator App and now I want to go back to the first screen. There seems to be three different ways to do this and they do navigate to where I want to do, however each way has an animation that cycles through each previous screen. </p>
  
  <p>Is there a clean way to navigate from <code>SCREEN_D</code> to <code>SCREEN_A</code>? </p>
  
  <p>In other words, I don't want to see <code>SCREEN_C</code> and <code>SCREEN_B</code> a split of a second before seeing <code>SCREEN_A</code> when navigating backwards from <code>SCREEN_D</code></p>
  
  <pre><code>navigation.navigate(SCREEN_A);
  ...
  navigation.navigate(SCREEN_B);
  ...
  navigation.navigate(SCREEN_C);
  ...
  navigation.navigate(SCREEN_D);
  </code></pre>
  
  <p>Three ways to do this:</p>
  
  <p>1.</p>
  
  <pre><code>return this.props.navigation
                 .dispatch(NavigationActions.reset(
                   {
                      index: 0,
                      actions: [NavigationActions.navigate({ routeName: 'SCREEN_A'})]
                    }));
  </code></pre>
  
  <p>2.</p>
  
  <pre><code> const {SCREEN_B_KEY} = this.props.navigation.state.params
   this.props.navigation.goBack(SCREEN_B_KEY)
  </code></pre>
  
  <p>3.</p>
  
  <pre><code>const defaultGetStateForAction = Navigation.router.getStateForAction;
  
  Navigation.router.getStateForAction = (action, state) =&gt;{
    if(action.type === "Navigation/BACK"){
      const routes = [
        {routeName: 'First'},
      ];
      return {
        ...state,
        routes,
        index: 0,
      };
    }
    return defaultGetStateForAction (action,state);
  }
  </code></pre>