Merge pull request #268 from retyui/use-modern-event-emitter-api

[RN 0.65.x] Adapt unsubscription for new EventEmitter API

Author: LinusU

src/useAccessibilityInfo.ts

@@ -21,9 +21,22 @@ function useAccessibilityStateListener(
     }
 
     AccessibilityInfo[initializerName]().then(setIsEnabled)
-    AccessibilityInfo.addEventListener(eventName, setIsEnabled)
 
-    return () => AccessibilityInfo.removeEventListener(eventName, setIsEnabled)
+    const subscription = AccessibilityInfo.addEventListener(
+      eventName,
+      setIsEnabled,
+    )
+
+    return () => {
+      // @ts-expect-error - React Native >= 0.65
+      if (typeof subscription?.remove === 'function') {
+        // @ts-expect-error - need update @types/react-native@0.65.x
+        subscription.remove()
+      } else {
+        // React Native < 0.65
+        AccessibilityInfo.removeEventListener(eventName, setIsEnabled)
+      }
+    }
   }, [eventName, initializerName])
 
   return isEnabled

src/useAppState.ts

@@ -10,10 +10,17 @@ export function useAppState() {
       setAppState(newState)
     }
 
-    AppState.addEventListener('change', onChange)
+    const subscription = AppState.addEventListener('change', onChange)
 
     return () => {
-      AppState.removeEventListener('change', onChange)
+      // @ts-expect-error - React Native >= 0.65
+      if (typeof subscription?.remove === 'function') {
+        // @ts-expect-error - need update @types/react-native@0.65.x
+        subscription.remove()
+      } else {
+        // React Native < 0.65
+        AppState.removeEventListener('change', onChange)
+      }
     }
   }, [])
 

src/useDeviceOrientation.ts

@@ -21,10 +21,17 @@ export function useDeviceOrientation() {
       })
     }
 
-    Dimensions.addEventListener('change', onChange)
+    const subscription = Dimensions.addEventListener('change', onChange)
 
     return () => {
-      Dimensions.removeEventListener('change', onChange)
+      // @ts-expect-error - React Native >= 0.65
+      if (typeof subscription?.remove === 'function') {
+        // @ts-expect-error - need update @types/react-native@0.65.x
+        subscription.remove()
+      } else {
+        // React Native < 0.65
+        Dimensions.removeEventListener('change', onChange)
+      }
     }
   }, [])
 

src/useDimensions.ts

@@ -18,9 +18,18 @@ export function useDimensions() {
   }
 
   useEffect(() => {
-    Dimensions.addEventListener('change', onChange)
+    const subscription = Dimensions.addEventListener('change', onChange)
 
-    return () => Dimensions.removeEventListener('change', onChange)
+    return () => {
+      // @ts-expect-error - React Native >= 0.65
+      if (typeof subscription?.remove === 'function') {
+        // @ts-expect-error - need update @types/react-native@0.65.x
+        subscription.remove()
+      } else {
+        // React Native < 0.65
+        Dimensions.removeEventListener('change', onChange)
+      }
+    }
   }, [])
 
   return dimensions