Use subscription objects to remove subscriptions (#1527)

* Use subscription objects to remove subscriptions

* Support RN64 as well as RN65 Appearance subscriptions

Co-authored-by: Ethan Sharabi <[email protected]>

Author: yedidyak

src/commons/asBaseComponent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Appearance} from 'react-native';
+import {Appearance, EventSubscription} from 'react-native';
 import hoistStatics from 'hoist-non-react-statics';
 import * as Modifiers from './modifiers';
 import forwardRef from './forwardRef';
@@ -27,12 +27,26 @@ function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentT
       error: false
     };
 
+    appearanceListenerSubscription?: EventSubscription = undefined;
+
     componentDidMount() {
-      Appearance.addChangeListener(this.appearanceListener);
+      // <  RN64 - void
+      // >= RN65 - EventSubscription
+      const subscription = Appearance.addChangeListener(this.appearanceListener);
+      if (subscription !== undefined) {
+        // @ts-ignore
+        this.appearanceListenerSubscription = subscription;
+      }
     }
-    
+
     componentWillUnmount() {
-      Appearance.removeChangeListener(this.appearanceListener);
+      if (this.appearanceListenerSubscription) {
+        // >=RN65
+        this.appearanceListenerSubscription?.remove();
+      } else {
+        // <RN65
+        Appearance.removeChangeListener(this.appearanceListener);
+      }
     }
 
     appearanceListener: Appearance.AppearanceListener = () => {

src/components/tagsInput/index.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactNative, {NativeModules, StyleSheet, ViewPropTypes, Image, DeviceEventEmitter} from 'react-native';
+import ReactNative, {NativeModules, StyleSheet, ViewPropTypes, Image, DeviceEventEmitter, EmitterSubscription} from 'react-native';
 import {Constants} from '../../helpers';
 import {Colors, BorderRadiuses, Typography} from '../../style';
 import Assets from '../../assets';
@@ -88,6 +88,8 @@ export default class TagsInput extends BaseComponent {
     REMOVED: 'removed'
   };
 
+  backspacePressEventSubscription: EmitterSubscription = undefined;
+
   constructor(props) {
     super(props);
 
@@ -114,14 +116,14 @@ export default class TagsInput extends BaseComponent {
 
       if (textInputHandle && NativeModules.TextInputDelKeyHandler) {
         NativeModules.TextInputDelKeyHandler.register(textInputHandle);
-        DeviceEventEmitter.addListener('onBackspacePress', this.onKeyPress);
+        this.backspacePressEventSubscription = DeviceEventEmitter.addListener('onBackspacePress', this.onKeyPress);
       }
     }
   }
 
   componentWillUnmount() {
     if (Constants.isAndroid) {
-      DeviceEventEmitter.removeListener('onBackspacePress', this.onKeyPress);
+      this.backspacePressEventSubscription.remove();
     }
   }