BackAndroid无法卸载-React Native（Android）

Question

I am working with React Native 0.29 with Android. For a particular view/activity/screen of my app, I want to add an event listener for BackAndroid button, which is available with react native. I already have a global BackAndroid event listener added to my app (in my index.android.js file) which pop out any view from the stack if it's not the main screen.

The event listener is activated with componentDidMount() lifecycle method and it works. It override the global one and works as expected. Now the problem is, it doesn't get removed when componentWillUnmount() lifecycle method get fired. So when back from that particular screen, the event listener still remains and cause trouble. Here is what I did:

componentDidMount() {
  BackAndroid.addEventListener('backBtnPressed', this._handleBackBtnPress.bind(this))
}

componentWillUnmount() {
  BackAndroid.removeEventListener('backBtnPressed', this._handleBackBtnPress.bind(this))
}

I don't understand why it's not working. Please help me to understand why it's not working and what should I do to solve this issue.

Answer 1

I spend hours to solve this problem. I think it would help other developers if I share this.

The main problem here is with the .bind(this) statement, bind always returns a new function. So in this code, this._handleBackBtnPress.bind(this) are not same functions in addEventListener and removeEventListener . They are different functions referring different first-class objects. That's why removeEventListener is not removing the listener.

To solve this issue, we can add the following statement to our constructor method - this._handleBackBtnPress = this._handleBackBtnPress.bind(this) and remove .bind(this) from both addEventListener and removeEventListener . So our code will look something like this:

constructor(props) {
  super(props)
  this._handleBackBtnPress = this._handleBackBtnPress.bind(this)
}

componentDidMount() {
  BackAndroid.addEventListener('backBtnPressed', this._handleBackBtnPress)
}

componentWillUnmount() {
  BackAndroid.removeEventListener('backBtnPressed', this._handleBackBtnPress)
}

Now both of them will refer same function and will work as expected.