title: How to forcefully unmount a component in react native?
body: <p>I'm using <a href="https://reactnavigation.org/" rel="nofollow noreferrer"><strong><code>reactnavigation</code></strong></a> stackNavigtor as the root structure.</p>
  
  <p>When my app loads, it initially mounts a component based on intialRouteName - which is good so far. However, when I open my slideMenu and navigate to another screen, the component that I was just in, is not unmounted and still renders at the back, even though I have successfully navigated.</p>
  
  <p>Ofcourse I can use the <code>this.state({})</code> in my initial component to stop the render, but the issue is, I can't setup it in such a way that when I navigate to another screen, I'd prevent the render of the previous screen.</p>
  
  <h1>AppNavigation.js</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*
   * LaunchScreen loads first
   * I then navigate to Profile via (this.props.navigate('OpenDrawer')).
   *  - This opens CustomComponent and inside that, I select Profile
   * When I navigate to Profile, The LaunchScreen is not unmounted
  */
  export const SignedIn = StackNavigator({
    LaunchScreen: {
      screen: $LaunchScreen
    },
    Profile: {
      screen: $Profile
    },
    EditProfile: {
      screen: EditProfile
    },
    MyDoctors: {
      screen: $Doctors
    }
  }, {
    headerMode: "none",
    mode: "modal",
    initialRouteName: 'LaunchScreen' // this is the component that loads
  });
  
  export const HomeNav = StackNavigator({
    Home: {
      screen: SignedIn,
      navigationOptions: {
        gesturesEnabled: false
      }
    }
  }, {
    headerMode: "none",
    mode: "modal",
    initialRouteName: "Home", // we enter this route when the app loads.
  });
  
  const PrimaryNav = StackNavigator({
    SignedIn: {
      screen: HomeNav,
      navigationOptions: {
        gesturesEnabled: false
      }
    },
    SignedOut: {
      screen: SignedOut,
      navigationOptions: {
        gesturesEnabled: false
      }
    },
    Loading: {
      screen: Loading
    }
  }, {
    headerMode: "none",
    mode: "modal",
    initialRouteName: "Loading",
  });
  
  export default PrimaryNav;</code></pre>
  </div>
  </div>
  </p>
  
  <h1>LaunchScreen.js</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// ... Imports {}
  
  
  export default class LaunchScreen extends PureComponent&lt;*, State&gt; {
    constructor(props) {
      super(props);
      this.state = {
        index: 0,
      };
    }
  
    componentDidMount() {
    };
  
  _renderScene = ({ route }) =&gt; {
      return (
        &lt;SimplePage
          state           = {this.state}
          style           = {{ backgroundColor: 'white' }}
          type            = {this.state.type}
          updateIndex     = {this.updateIndex.bind(this)}
  
        /&gt;
      );
    };
    
    _renderHeader = props =&gt; {
    /*
     * "this.props.navigation.navigate('DrawerOpen')" opens the drawer from left side
     *
    */
      return (
        &lt;View&gt;
          &lt;View style={styles.headerContainer}&gt;
            &lt;TouchableHighlight onPress={() =&gt; this.props.navigation.navigate('DrawerOpen')} activeOpacity={1.0} underlayColor="rgba(253,138,94,0)"&gt;
            &lt;/TouchableHighlight&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    };
  
  
    render() {
      return (
          &lt;TabViewAnimated
          style={[styles.container, this.props.style]}
          navigationState={this.state}
          renderScene={this._renderScene}
          renderHeader={this._renderHeader}
        /&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <h1>What is the main question?</h1>
  
  <p>I would like to know how I can unmount a component when I navigate to another screen.</p>