title: How to finish current component while navigating to next component in react native
body: <p>Hi I am trying to navigate to next component using <code>navigate</code> function. I am using <code>react-navigation</code> for the navigation among multiple components.</p>
  
  <p>Suppose I have <code>index.android.js</code> and <code>DashboardScreen.js</code> component. I am trying to navigate to <code>DashboardScreen.js</code> component from index component. </p>
  
  <p>It is navigating but index component always retain in component stack. when I press back then it opens <code>index.android.js</code> which should not be. Does anyone know how to manage this in <code>react-native</code>. In Android, <code>finish()</code> works for this.</p>
  
  <pre><code>navigate("DashboardScreen");
  </code></pre>
  
  <p>When I am navigating from <code>SplashScreen</code> to <code>EnableNotification</code> then <code>SplashScreen</code> should be destroyed, if I am navigating from <code>EnableNotification</code> to <code>CreateMessage</code> then <code>EnableNotification</code> should be destroyed and if I am navigating from <code>CreateMessage</code> to <code>DashboardScreen</code> then <code>CreateMessage</code> should be destroyed. As of now no component is being destroyed.</p>
  
  <p>index.android.js</p>
  
  <pre><code>class SplashScreen extends Component {
    render() {
      if (__DEV__) {
        console.disableYellowBox = true;
      }
  
      const { navigate } = this.props.navigation;
  
      AsyncStorage.getItem("@ProductTour:key").then(value =&gt; {
        console.log(value);
        if (value) {
          navigate("DashboardScreen");
        }
      });
  
      return (
       ....
      );
    }
  }
  
  const App = StackNavigator(
    {
      Splash: {
        screen: SplashScreen,
        navigationOptions: {
          header: {
            visible: false
          }
        }
      },
      EnableNotification: {
        screen: EnableNotificationScreen,
        navigationOptions: {
          header: {
            visible: false
          }
        }
      },
      CreateMessage: {
        screen: CreateMessageScreen,
        navigationOptions: {
          header: {
            visible: false
          }
        }
      },
      DashboardScreen: {
        screen: DashboardScreen,
        navigationOptions: {
          header: {
            visible: false
          }
        }
      }
    },
    {
      initialRouteName: "Splash"
    }
  );
  </code></pre>