fix: use remove method on the event subscription (#2918)

Author: lukewalczak

package.json

@@ -60,7 +60,7 @@
     "@types/jest": "^24.0.13",
     "@types/node": "^13.1.0",
     "@types/react-dom": "^16.8.4",
-    "@types/react-native": "^0.63.0",
+    "@types/react-native": "^0.65.5",
     "@types/react-native-vector-icons": "^6.4.1",
     "@typescript-eslint/eslint-plugin": "^2.12.0",
     "@typescript-eslint/parser": "^2.12.0",

src/components/Menu/Menu.tsx

@@ -14,6 +14,7 @@ import {
   ViewStyle,
   ScrollView,
   findNodeHandle,
+  NativeEventSubscription,
 } from 'react-native';
 
 import { withTheme } from '../../core/theming';
@@ -166,6 +167,8 @@ class Menu extends React.Component<Props, State> {
 
   private anchor?: View | null = null;
   private menu?: View | null = null;
+  private backHandlerSubscription: NativeEventSubscription | undefined;
+  private dimensionsSubscription: NativeEventSubscription | undefined;
 
   private isCoordinate = (anchor: any): anchor is { x: number; y: number } =>
     !React.isValidElement(anchor) &&
@@ -239,15 +242,30 @@ class Menu extends React.Component<Props, State> {
   };
 
   private attachListeners = () => {
-    BackHandler.addEventListener('hardwareBackPress', this.handleDismiss);
-    Dimensions.addEventListener('change', this.handleDismiss);
+    this.backHandlerSubscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      this.handleDismiss
+    );
+    this.dimensionsSubscription = Dimensions.addEventListener(
+      'change',
+      this.handleDismiss
+    );
 
     this.isBrowser() && document.addEventListener('keyup', this.handleKeypress);
   };
 
   private removeListeners = () => {
-    BackHandler.removeEventListener('hardwareBackPress', this.handleDismiss);
-    Dimensions.removeEventListener('change', this.handleDismiss);
+    if (this.backHandlerSubscription?.remove) {
+      this.backHandlerSubscription.remove();
+    } else {
+      BackHandler.removeEventListener('hardwareBackPress', this.handleDismiss);
+    }
+
+    if (this.dimensionsSubscription?.remove) {
+      this.dimensionsSubscription.remove();
+    } else {
+      Dimensions.removeEventListener('change', this.handleDismiss);
+    }
 
     this.isBrowser() &&
       document.removeEventListener('keyup', this.handleKeypress);

src/components/Modal.tsx

@@ -8,6 +8,7 @@ import {
   TouchableWithoutFeedback,
   ViewStyle,
   View,
+  NativeEventSubscription,
 } from 'react-native';
 import {
   getStatusBarHeight,
@@ -132,6 +133,8 @@ class Modal extends React.Component<Props, State> {
     }
   }
 
+  private subscription: NativeEventSubscription | undefined;
+
   private handleBack = () => {
     if (this.props.dismissable) {
       this.hideModal();
@@ -140,8 +143,15 @@ class Modal extends React.Component<Props, State> {
   };
 
   private showModal = () => {
-    BackHandler.removeEventListener('hardwareBackPress', this.handleBack);
-    BackHandler.addEventListener('hardwareBackPress', this.handleBack);
+    if (this.subscription?.remove) {
+      this.subscription.remove();
+    } else {
+      BackHandler.removeEventListener('hardwareBackPress', this.handleBack);
+    }
+    this.subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      this.handleBack
+    );
 
     const { opacity } = this.state;
     const { scale } = this.props.theme.animation;
@@ -155,7 +165,11 @@ class Modal extends React.Component<Props, State> {
   };
 
   private hideModal = () => {
-    BackHandler.removeEventListener('hardwareBackPress', this.handleBack);
+    if (this.subscription?.remove) {
+      this.subscription?.remove();
+    } else {
+      BackHandler.removeEventListener('hardwareBackPress', this.handleBack);
+    }
 
     const { opacity } = this.state;
     const { scale } = this.props.theme.animation;
@@ -185,7 +199,11 @@ class Modal extends React.Component<Props, State> {
   };
 
   componentWillUnmount() {
-    BackHandler.removeEventListener('hardwareBackPress', this.handleBack);
+    if (this.subscription?.remove) {
+      this.subscription.remove();
+    } else {
+      BackHandler.removeEventListener('hardwareBackPress', this.handleBack);
+    }
   }
 
   render() {

src/core/Provider.tsx

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { AccessibilityInfo, Appearance, ColorSchemeName } from 'react-native';
+import {
+  AccessibilityInfo,
+  Appearance,
+  ColorSchemeName,
+  NativeEventSubscription,
+} from 'react-native';
 import { ThemeProvider } from './theming';
 import { Provider as SettingsProvider, Settings } from './settings';
 import MaterialCommunityIcon from '../components/MaterialCommunityIcon';
@@ -32,18 +37,24 @@ const Provider = ({ ...props }: Props) => {
   };
 
   React.useEffect(() => {
+    let subscription: NativeEventSubscription | undefined;
+
     if (!props.theme) {
-      AccessibilityInfo.addEventListener(
+      subscription = AccessibilityInfo.addEventListener(
         'reduceMotionChanged',
         setReduceMotionEnabled
       );
     }
     return () => {
       if (!props.theme) {
-        AccessibilityInfo.removeEventListener(
-          'reduceMotionChanged',
-          setReduceMotionEnabled
-        );
+        if (subscription?.remove) {
+          subscription.remove();
+        } else {
+          AccessibilityInfo.removeEventListener(
+            'reduceMotionChanged',
+            setReduceMotionEnabled
+          );
+        }
       }
     };
   }, [props.theme]);

yarn.lock

@@ -2749,10 +2749,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-native@^0.63.0":
-  version "0.63.46"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.46.tgz#942df5af29046c6f22227495e00d5297cc1cea73"
-  integrity sha512-SnBnWRErpISIaWk4K8kAfIKqSPdZ8fdH6HIw7kVdz6jMl/5FAf6iXeIwRfVZg1bCMh+ymNPCpSENNNEVprxj/w==
+"@types/react-native@^0.65.5":
+  version "0.65.5"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.65.5.tgz#e5e473be8c7ed784419554f25cc8850b9c3ce68d"
+  integrity sha512-lc2JVmqVIkFmEtUHX8jCkuepqRSzlhRPBIlVFVc0hgfoUxvntrORhmK7LCnAbHfmpUqVVGhMjax27CCTACQ2Kw==
   dependencies:
     "@types/react" "*"