backAction = () => {
    if (this.props.navigation.isFocused() && !this.state.otpScreen) {
     
  this.setState({ showLoginScreen: true });
  return true;

} else if(this.state.showLoginScreen) {
  this.props.navigation.dispatch(CommonActions.reset({
    index: 0,
    routes: [
      { name: 'Login' },
    ],
  }))
  
  return false;
}

};

the code above is for action that should be done by the hardware back press, at first it should show the one screen and on the second press it should exit the app, both otp screen and login screen are on the same component, I'm just hiding based on the condition ... at the first time it is working as per the condition but for the second time it's not.

 componentDidMount() {
this.focusListener = this.props.navigation.addListener('focus', () => {
  this.setState({
    mobile: '',
    showLoginScreen: true,
  });
});
this.getDataFromStorage();
AsyncStorage.setItem('countryCode', '+91');
BackHandler.addEventListener(
  "hardwareBackPress",
  this.backAction
);


}
  componentWillUnmount() {
    clearInterval(this.interval)
    BackHandler.addEventListener('hardwareBackPress', () => { return false })
  }

can anyone pls help me how to do this,thanks in Advance