title: react-native componentWillUnmount not working while navigating
body: <p>I am doing this simple steps but unmount was not calling I don't know why. Please I need a solution for this I need unmount to be get called while navigating to another screen...</p>
  
  <pre><code>class Homemain extends Component {
      constructor(props) {
          super(props);
      }
  
      componentWillMount(){
          alert('willMount')
      }
      componentDidMount(){
          alert('didMount')
      }
      componentWillUnmount(){
          alert('unMount')
      }
      Details = () =&gt; {
          this.props.navigation.navigate('routedetailsheader')
      }
  
      render() {
          return(
              &lt;View style={styles.container}&gt;
                  &lt;TouchableOpacity onPress={() =&gt; this.Details()} style={{ flex: .45, justifyContent: 'center', alignItems: 'center', marginTop: '10%', marginRight: '10%' }}&gt;
                      &lt;Image
                          source={require('./../Asset/Images/child-notification.png')}
                          style={{ flex: 1, height: height / 100 * 20, width: width / 100 * 20, resizeMode: 'contain' }} /&gt;
                      &lt;Text
                          style={{ flex: 0.5, justifyContent: 'center', fontSize: width / 100 * 4, fontStyle: 'italic', fontWeight: '400', color: '#000', paddingTop: 10 }}&gt;Details&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          );
      }
  }
  export default (Homemain);
  </code></pre>
  
  <p>This is my RouteConfiguration in this way I am navigating to the next screen. Can someone please help me for this error  so that i can proceed to the next steps</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { addNavigationHelpers, NavigationActions } from 'react-navigation';
  import { connect } from 'react-redux';
  import { BackHandler } from 'react-native';
  import { Stack } from './navigationConfiguration';
  
  const getCurrentScreen = (navigationState) =&gt; {
    if (!navigationState) {
      return null
    }
    const route = navigationState.routes[navigationState.index]
    if (route.routes) {
      return getCurrentScreen(route)
    }
    return route.routeName
  }
  class StackNavigation extends Component {
    static propTypes = {
      dispatch: PropTypes.func.isRequired,
      navigation: PropTypes.shape().isRequired,
    };
  
    constructor(props) {
      super(props);
      BackHandler.addEventListener('hardwareBackPress', this.backAction);
    }
  
    //backAction = () =&gt; this.navigator.props.navigation.goBack();
  
    backAction = () =&gt; {
      const { dispatch, navigation } = this.props;
      const currentScreen = getCurrentScreen(navigation)
  
      if (currentScreen === 'Homemain') {
        return false
      }
      else
        if (currentScreen === 'Login') {
          return false
        }
  
      dispatch(NavigationActions.back());
      return true;
    };
  
    render() {
      const { dispatch, navigation } = this.props;
  
      return (
        &lt;Stack
          ref={(ref) =&gt; { this.navigator = ref; }}
          navigation={
            addNavigationHelpers({
              dispatch,
              state: navigation,
            })
          }
        /&gt;
      );
    }
  }
  
  export default connect(state =&gt; ({ navigation: state.stack }))(StackNavigation);
  </code></pre>