AppState.removeEventListener does not remove the event listener

Description:

Please provide a clear and concise description of what the bug is. Include screenshots if needed.
Please test using the latest React Native release to make sure your issue has not already been fixed: http://facebook.github.io/react-native/docs/upgrading.html

React Native version:

System: OS: macOS 10.15.2 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Memory: 20.60 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node Yarn: 1.19.1 - /usr/local/bin/yarn npm: 6.13.4 - ~/.nvm/versions/node/v12.13.1/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 Android SDK: API Levels: 27, 28, 29 Build Tools: 27.0.3, 28.0.2, 28.0.3, 29.0.2 System Images: android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64 IDEs: Android Studio: 3.5 AI-191.8026.42.35.6010548 Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild npmPackages: react: ^16.12.0 => 16.12.0 react-native: ^0.61.5 => 0.61.5

Steps To Reproduce

1. component adds event listener for ‘change’ to AppState
2. press home button to leave the app
3. event listener receives the ‘change’ event
4. go back to the app
5. component removes the event listener
6. press home button to leave the app
7. event listener still receives the ‘change’ event even though it was removed

Expected Results

Component should not receive the ‘change’ event after removing the event handler from AppState

Snack, code example, screenshot, or link to a repository:

Snack here: https://snack.expo.io/@masaltzman/c38c13

Code here: ` import React, { useState, Fragment, useContext, useEffect } from ‘react’; import { Text, View, StyleSheet, AppState, Button } from ‘react-native’; import Constants from ‘expo-constants’;

// You can import from local files import AssetExample from ‘./components/AssetExample’;

// or any pure javascript modules available in npm import { Card } from ‘react-native-paper’;

function appStateChangeHandler(newState) { console.log(‘AppState changed:’, newState); }

function removeListener() { console.log(“listener removed”); AppState.removeEventListener(‘change’, appStateChangeHandler) }

export default props => { function appStateChangeHandler(newState) { console.log(‘AppState changed:’, newState); }

useEffect(() => { console.log(“listener added”); AppState.addEventListener(‘change’, appStateChangeHandler); // AppState.removeEventListener(‘change’, appStateChangeHandler); }, []);

return ( <View style={{margin: 100}}> <Button title=“remove” onPress={() => removeListener()}/> </View> ); }; `

[dulmandakh]

it looks that you have 2 appStateChangeHandler functions, and you’re adding inner one to AppState and trying removing outer one, thus differ. Please remove inner one, and I hope that I’ll work just fine.

[dulmandakh]

Pressing Home won’t close an app, so event listeners will be called. Also you didn’t removed the listener. Thanks