react-native componentWillUnmount not working while navigating

Question

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...

class Homemain extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount(){
        alert('willMount')
    }
    componentDidMount(){
        alert('didMount')
    }
    componentWillUnmount(){
        alert('unMount')
    }
    Details = () => {
        this.props.navigation.navigate('routedetailsheader')
    }

    render() {
        return(
            <View style={styles.container}>
                <TouchableOpacity onPress={() => this.Details()} style={{ flex: .45, justifyContent: 'center', alignItems: 'center', marginTop: '10%', marginRight: '10%' }}>
                    <Image
                        source={require('./../Asset/Images/child-notification.png')}
                        style={{ flex: 1, height: height / 100 * 20, width: width / 100 * 20, resizeMode: 'contain' }} />
                    <Text
                        style={{ flex: 0.5, justifyContent: 'center', fontSize: width / 100 * 4, fontStyle: 'italic', fontWeight: '400', color: '#000', paddingTop: 10 }}>Details</Text>
                </TouchableOpacity>
            </View>
        );
    }
}
export default (Homemain);

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

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) => {
  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 = () => this.navigator.props.navigation.goBack();

  backAction = () => {
    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 (
      <Stack
        ref={(ref) => { this.navigator = ref; }}
        navigation={
          addNavigationHelpers({
            dispatch,
            state: navigation,
          })
        }
      />
    );
  }
}

export default connect(state => ({ navigation: state.stack }))(StackNavigation);

Answer 1

Routing to a new screen does not unmount the current screen.

For you usecase you instead of writing the code in componentWillUnmount you can continue by writing it after calling navigate in Details itself.

If you are looking for a callback when you press back from the new screen to come back to the current screen. Use goBack as shown in https://github.com/react-navigation/react-navigation/issues/733