CODEWITHSUNDEEP
androidreact-native
Rishav Kumar
Rishav Kumar

Reputation: 5450

React Native: Android back button does not work when the screen re mounts

I used componentDidMount and componentDidUnmount for android button to work. But when I come again to the same screen from another screen, the function which I have placed in android back button does not work. It works initially when I load the screen for first time but when I go to another screen and come back to that screen again the function which I have placed in back button does not work.

when I tap on the nav bar below. When I go to the other screen and come back it is working fine.. But when I tap on the nav bar and navigate to other screen and then come back again to the screen then the function does not help!! I am in a great dilemma. Particularly to make it clear: I am on the home screen, I go-to description of the post, and then come back to home screen back button function of android works..But when I tap on the nav bar, navigate to other screen and then come back clicking on the nav bar, the function does not work. –

async componentDidMount() {
     BackHandler.addEventListener('hardwareBackPress',this.handleBackButtonClick);
}    
componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}

async handleBackButtonClick() {

Alert.alert(
    'Exit the app?',
    'Are you sure you want to exit the app?',

    [
      {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
      {text: 'OK', onPress: () => BackHandler.exitApp()},
    ],
    { cancelable: false }
  )

}

Upvotes: 3

Views: 3020

Answers (3)

ari prasath
ari prasath

Reputation: 1

There might be something like

DeviceEmitters.removeAllListeners()

or

___.removeAllListeners()

where the backhandler would mess up

Upvotes: 0

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

First, make sure which method calls when you come back again to the screen.

componentWillMount() {

    console.log("componentWillMount");


    this.props.navigation.addListener(
      'willBlur',
      payload => {
        console.log('willBlur', payload);
      }
    );

    this.props.navigation.addListener(
      'willFocus',
      payload => {
        console.debug('willFocus', payload);
      }
    );

    this.props.navigation.addListener(
      'didFocus',
      payload => {
        console.debug('didFocus', payload);
      }
    );

    this.props.navigation.addListener(
      'didBlur',
      payload => {
        console.debug('didBlur', payload);
      }
    );
}



componentDidMount(){
    console.log("componentDidMount")
}

componentDidUpdate(){
    console.log("componentDidUpdate")
}

componentWillUnmount(){
    console.log("componentWillUnmount")
}

then run your function.

Upvotes: 1

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

You just use addListener for navigation.

Like this:

componentDidMount() {

    this.props.navigation.addListener(
      'didFocus',
      payload => {
        BackHandler.addEventListener('hardwareBackPress',this.handleBackButtonClick);
      }
    );

}

follow this link: addlistener-subscribe-to-updates-to-navigation-lifecycle

Upvotes: 1

Related Questions