fix: backhandler api update

packages/react-native-aria/interactions/src/index.ts

@@ -10,5 +10,6 @@ export {
 export {
   keyboardDismissHandlerManager,
   useKeyboardDismissable,
-  useBackHandler,
 } from './useKeyboardDismisssable';
+
+export { useBackHandler } from './useBackHandler';

packages/react-native-aria/interactions/src/useBackHandler.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { BackHandler, NativeEventSubscription } from 'react-native';
+
+type IParams = {
+  enabled?: boolean;
+  callback: () => any;
+};
+
+export function useBackHandler({ enabled, callback }: IParams) {
+  const backHandlerRef = useRef<NativeEventSubscription | null>(null);
+
+  useEffect(() => {
+    const backHandler = () => {
+      callback();
+      return true;
+    };
+    if (enabled) {
+      backHandlerRef.current = BackHandler.addEventListener(
+        'hardwareBackPress',
+        backHandler
+      );
+    } else {
+      backHandlerRef.current?.remove();
+    }
+    return () => backHandlerRef.current?.remove();
+  }, [enabled, callback]);
+}

packages/react-native-aria/interactions/src/useBackHandler.web.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+type IParams = {
+  enabled?: boolean;
+  callback: () => any;
+};
+
+export function useBackHandler({ enabled, callback }: IParams) {
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        callback();
+      }
+    };
+
+    document?.body?.addEventListener?.('keyup', handleEscape);
+    return () => {
+      document?.body?.removeEventListener?.('keyup', handleEscape);
+    };
+  }, [enabled, callback]);
+}

packages/react-native-aria/interactions/src/useKeyboardDismisssable.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import { useEffect } from 'react';
-import { BackHandler, Platform } from 'react-native';
+import { useBackHandler } from './useBackHandler';
 
 type IParams = {
   enabled?: boolean;
@@ -27,7 +26,7 @@ export const keyboardDismissHandlerManager = {
  * Handles attaching callback for Escape key listener on web and Back button listener on Android
  */
 export const useKeyboardDismissable = ({ enabled, callback }: IParams) => {
-  React.useEffect(() => {
+  useEffect(() => {
     let cleanupFn = () => {};
     if (enabled) {
       cleanupFn = keyboardDismissHandlerManager.push(callback);
@@ -41,32 +40,3 @@ export const useKeyboardDismissable = ({ enabled, callback }: IParams) => {
 
   useBackHandler({ enabled, callback });
 };
-
-export function useBackHandler({ enabled, callback }: IParams) {
-  useEffect(() => {
-    if (Platform.OS === 'web') {
-      const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          callback();
-        }
-      };
-
-      document?.body?.addEventListener?.('keyup', handleEscape);
-      return () => {
-        document?.body?.removeEventListener?.('keyup', handleEscape);
-      };
-    } else {
-      let backHandler = () => {
-        callback();
-        return true;
-      };
-      if (enabled) {
-        BackHandler.addEventListener('hardwareBackPress', backHandler);
-      } else {
-        BackHandler.removeEventListener('hardwareBackPress', backHandler);
-      }
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', backHandler);
-    }
-  }, [enabled, callback]);
-}

packages/unstyled/hooks/src/use-back-handler/index.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { BackHandler, type NativeEventSubscription } from 'react-native';
+
+type IParams = {
+  enabled?: boolean;
+  callback: () => any;
+};
+
+export function useBackHandler({ enabled, callback }: IParams) {
+  const backHandlerRef = useRef<NativeEventSubscription | null>(null);
+
+  useEffect(() => {
+    const backHandler = () => {
+      callback();
+      return true;
+    };
+    if (enabled) {
+      backHandlerRef.current = BackHandler.addEventListener(
+        'hardwareBackPress',
+        backHandler
+      );
+    } else {
+      backHandlerRef.current?.remove();
+    }
+    return () => backHandlerRef.current?.remove();
+  }, [enabled, callback]);
+}

packages/unstyled/hooks/src/use-back-handler/index.web.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+type IParams = {
+  enabled?: boolean;
+  callback: () => any;
+};
+
+export function useBackHandler({ enabled, callback }: IParams) {
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        callback();
+      }
+    };
+
+    document?.body?.addEventListener?.('keyup', handleEscape);
+    return () => {
+      document?.body?.removeEventListener?.('keyup', handleEscape);
+    };
+  }, [enabled, callback]);
+}

packages/unstyled/hooks/src/use-keyboard-dismissable/index.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { useEffect } from 'react';
-import { BackHandler, Platform } from 'react-native';
+import { useBackHandler } from '../use-back-handler';
 
 type IParams = {
   enabled?: boolean;
@@ -41,32 +40,3 @@ export const useKeyboardDismissable = ({ enabled, callback }: IParams) => {
 
   useBackHandler({ enabled, callback });
 };
-
-export function useBackHandler({ enabled, callback }: IParams) {
-  useEffect(() => {
-    if (Platform.OS === 'web') {
-      const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          callback();
-        }
-      };
-
-      document?.body?.addEventListener?.('keyup', handleEscape);
-      return () => {
-        document?.body?.removeEventListener?.('keyup', handleEscape);
-      };
-    } else {
-      const backHandler = () => {
-        callback();
-        return true;
-      };
-      if (enabled) {
-        BackHandler.addEventListener('hardwareBackPress', backHandler);
-      } else {
-        BackHandler.removeEventListener('hardwareBackPress', backHandler);
-      }
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', backHandler);
-    }
-  }, [enabled, callback]);
-}

packages/unstyled/react-native-aria/src/useKeyboardDismisssable.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { useEffect } from 'react';
-import { BackHandler } from 'react-native';
+import { useEffect, useRef } from 'react';
+import { BackHandler, NativeEventSubscription } from 'react-native';
 
 type IParams = {
   enabled?: boolean;
@@ -27,7 +26,7 @@ export const keyboardDismissHandlerManager = {
  * Handles attaching callback for Escape key listener on web and Back button listener on Android
  */
 export const useKeyboardDismissable = ({ enabled, callback }: IParams) => {
-  React.useEffect(() => {
+  useEffect(() => {
     let cleanupFn = () => {};
     if (enabled) {
       cleanupFn = keyboardDismissHandlerManager.push(callback);
@@ -41,19 +40,22 @@ export const useKeyboardDismissable = ({ enabled, callback }: IParams) => {
 
   useBackHandler({ enabled, callback });
 };
-
 export function useBackHandler({ enabled, callback }: IParams) {
+  const backHandlerRef = useRef<NativeEventSubscription | null>(null);
+
   useEffect(() => {
-    let backHandler = () => {
+    const backHandler = () => {
       callback();
       return true;
     };
     if (enabled) {
-      BackHandler.addEventListener('hardwareBackPress', backHandler);
+      backHandlerRef.current = BackHandler.addEventListener(
+        'hardwareBackPress',
+        backHandler
+      );
     } else {
-      BackHandler.removeEventListener('hardwareBackPress', backHandler);
+      backHandlerRef.current?.remove();
     }
-    return () =>
-      BackHandler.removeEventListener('hardwareBackPress', backHandler);
+    return () => backHandlerRef.current?.remove();
   }, [enabled, callback]);
 }