fix: react-native >= 0.65 subscriptions

src/hooks/useKeyboardDismissable.ts

@@ -44,16 +44,31 @@ export const useKeyboardDismissable = ({ enabled, callback }: IParams) => {
 
 export function useBackHandler({ enabled, callback }: IParams) {
   useEffect(() => {
-    let backHandler = () => {
+    const backHandler = () => {
       callback();
       return true;
     };
+    let subscription: any;
     if (enabled) {
-      BackHandler.addEventListener('hardwareBackPress', backHandler);
+      subscription = BackHandler.addEventListener(
+        'hardwareBackPress',
+        backHandler
+      );
     } else {
-      BackHandler.removeEventListener('hardwareBackPress', backHandler);
+      if (BackHandler.removeEventListener) {
+        BackHandler.removeEventListener('hardwareBackPress', backHandler);
+      }
     }
-    return () =>
-      BackHandler.removeEventListener('hardwareBackPress', backHandler);
+    return () => {
+      // React Native >= 0.65
+      // @ts-ignore:next-line ignoring ts error as devDependency contains "@types/react-native" < 0.65
+      if (subscription?.remove) {
+        subscription.remove();
+      }
+
+      if (BackHandler.removeEventListener) {
+        BackHandler.removeEventListener('hardwareBackPress', backHandler);
+      }
+    };
   }, [enabled, callback]);
 }

src/hooks/useScreenReaderEnabled.ts

@@ -18,7 +18,7 @@ export function useScreenReaderEnabled() {
       handleSetEnabled(res);
     }
 
-    let handler: any = AccessibilityInfo.addEventListener(
+    const handler: any = AccessibilityInfo.addEventListener(
       'screenReaderChanged',
       (event: any) => {
         handleSetEnabled(event);
@@ -28,7 +28,15 @@ export function useScreenReaderEnabled() {
     setInitialValue();
     return () => {
       mountedRef.current = false;
-      AccessibilityInfo.removeEventListener('screenReaderChanged', handler);
+      // React Native >= 0.65
+      // @ts-ignore:next-line ignoring ts error as devDependency contains "@types/react-native" < 0.65
+      if (handler.remove) {
+        handler.remove();
+      }
+
+      if (AccessibilityInfo.removeEventListener) {
+        AccessibilityInfo.removeEventListener('screenReaderChanged', handler);
+      }
     };
   });
 

src/utils/useResponsiveQuery/common.ts

@@ -9,7 +9,7 @@ export const getResponsiveStylesImpl = (width: number) => (
   queries: GetResponsiveStylesParams
 ): GetResponsiveStylesReturnType => {
   if (typeof width === 'number') {
-    let styles = queries.initial
+    const styles = queries.initial
       ? [
           StyleSheet.create({ initial: StyleSheet.flatten(queries.initial) })
             .initial,
@@ -72,14 +72,26 @@ export const useDimensionsWithEnable = ({ enable }: { enable?: boolean }) => {
           setDimensions(window);
         }
       }
-      Dimensions.addEventListener('change', handleChange);
+
+      const subscription: any = Dimensions.addEventListener(
+        'change',
+        handleChange
+      );
       // We might have missed an update between calling `get` in render and
       // `addEventListener` in this handler, so we set it here. If there was
       // no change, React will filter out this update as a no-op.
       handleChange({ window: Dimensions.get('window') });
 
       return () => {
-        Dimensions.removeEventListener('change', handleChange);
+        // React Native >= 0.65
+        // @ts-ignore:next-line ignoring ts error as devDependency contains "@types/react-native" < 0.65
+        if (subscription.remove) {
+          subscription.remove();
+        }
+
+        if (Dimensions.removeEventListener) {
+          Dimensions.removeEventListener('change', handleChange);
+        }
       };
     }
     return () => {};