From 44d619414c1de3dbf17a421afa8dbcec7cdab025 Mon Sep 17 00:00:00 2001
From: D N <4661784+retyui@users.noreply.github.com>
Date: Sat, 9 Nov 2024 15:56:44 -0800
Subject: [PATCH] fix: Remove `BackHandler.removeEventListener` (#45892)

Summary:
All `removeEventListener` methods was removed  https://github.com/facebook/react-native/commit/2596b2f6954362d2cd34a1be870810ab90cbb916 perviously  but seems a `BackHandler` was missed

This can be a breaking change for some third-party modules.

**Migration**: Use `remove` on the EventSubscription from `addEventListener`:

```diff
useEffect(()=>{
+  const subscription = NativeModule.removeListener(name, listener);
+  return ()=>subscription.remove();
},[])
```

## Changelog:

[GENERAL] [REMOVED] - Remove `BackHandler.removeEventListener`

Pull Request resolved: https://github.com/facebook/react-native/pull/45892

Test Plan: ...

Reviewed By: huntie

Differential Revision: D65663591

Pulled By: javache

fbshipit-source-id: 01b804cd6ec77ea4916a0ced7fee551d045f1684
---
 .../Utilities/BackHandler.android.js          | 24 +++++--------------
 .../Libraries/Utilities/BackHandler.d.ts      |  4 ----
 .../Libraries/Utilities/BackHandler.ios.js    |  5 ----
 .../Libraries/Utilities/BackHandler.js.flow   |  4 ----
 .../Utilities/__mocks__/BackHandler.js        | 11 +++------
 .../__snapshots__/public-api-test.js.snap     |  4 ----
 packages/rn-tester/js/RNTesterAppShared.js    | 13 ++++------
 7 files changed, 14 insertions(+), 51 deletions(-)

diff --git a/packages/react-native/Libraries/Utilities/BackHandler.android.js b/packages/react-native/Libraries/Utilities/BackHandler.android.js
index 74519f78193..6105a5341de 100644
--- a/packages/react-native/Libraries/Utilities/BackHandler.android.js
+++ b/packages/react-native/Libraries/Utilities/BackHandler.android.js
@@ -59,10 +59,6 @@ type TBackHandler = {|
     eventName: BackPressEventName,
     handler: () => ?boolean,
   ) => {remove: () => void, ...},
-  +removeEventListener: (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ) => void,
 |};
 const BackHandler: TBackHandler = {
   exitApp: function (): void {
@@ -86,22 +82,14 @@ const BackHandler: TBackHandler = {
       _backPressSubscriptions.push(handler);
     }
     return {
-      remove: (): void => BackHandler.removeEventListener(eventName, handler),
+      remove: (): void => {
+        const index = _backPressSubscriptions.indexOf(handler);
+        if (index !== -1) {
+          _backPressSubscriptions.splice(index, 1);
+        }
+      },
     };
   },
-
-  /**
-   * Removes the event handler.
-   */
-  removeEventListener: function (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ): void {
-    const index = _backPressSubscriptions.indexOf(handler);
-    if (index !== -1) {
-      _backPressSubscriptions.splice(index, 1);
-    }
-  },
 };
 
 module.exports = BackHandler;
diff --git a/packages/react-native/Libraries/Utilities/BackHandler.d.ts b/packages/react-native/Libraries/Utilities/BackHandler.d.ts
index 72400aeb1c3..8ca8e1743d1 100644
--- a/packages/react-native/Libraries/Utilities/BackHandler.d.ts
+++ b/packages/react-native/Libraries/Utilities/BackHandler.d.ts
@@ -28,10 +28,6 @@ export interface BackHandlerStatic {
     eventName: BackPressEventName,
     handler: () => boolean | null | undefined,
   ): NativeEventSubscription;
-  removeEventListener(
-    eventName: BackPressEventName,
-    handler: () => boolean | null | undefined,
-  ): void;
 }
 
 export const BackHandler: BackHandlerStatic;
diff --git a/packages/react-native/Libraries/Utilities/BackHandler.ios.js b/packages/react-native/Libraries/Utilities/BackHandler.ios.js
index 49bd876d817..f024cdb9d35 100644
--- a/packages/react-native/Libraries/Utilities/BackHandler.ios.js
+++ b/packages/react-native/Libraries/Utilities/BackHandler.ios.js
@@ -20,10 +20,6 @@ type TBackHandler = {|
     eventName: BackPressEventName,
     handler: () => ?boolean,
   ) => {remove: () => void, ...},
-  +removeEventListener: (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ) => void,
 |};
 
 let BackHandler: TBackHandler = {
@@ -33,7 +29,6 @@ let BackHandler: TBackHandler = {
       remove: emptyFunction,
     };
   },
-  removeEventListener(_eventName: BackPressEventName, _handler: Function) {},
 };
 
 module.exports = BackHandler;
diff --git a/packages/react-native/Libraries/Utilities/BackHandler.js.flow b/packages/react-native/Libraries/Utilities/BackHandler.js.flow
index a966ffd6183..aec78e16970 100644
--- a/packages/react-native/Libraries/Utilities/BackHandler.js.flow
+++ b/packages/react-native/Libraries/Utilities/BackHandler.js.flow
@@ -18,10 +18,6 @@ type TBackHandler = {|
     eventName: BackPressEventName,
     handler: () => ?boolean,
   ) => {remove: () => void, ...},
-  +removeEventListener: (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ) => void,
 |};
 
 declare module.exports: TBackHandler;
diff --git a/packages/react-native/Libraries/Utilities/__mocks__/BackHandler.js b/packages/react-native/Libraries/Utilities/__mocks__/BackHandler.js
index f0c6a12d13a..bc5bc62dfea 100644
--- a/packages/react-native/Libraries/Utilities/__mocks__/BackHandler.js
+++ b/packages/react-native/Libraries/Utilities/__mocks__/BackHandler.js
@@ -20,17 +20,12 @@ const BackHandler = {
   ): {remove: () => void} {
     _backPressSubscriptions.add(handler);
     return {
-      remove: () => BackHandler.removeEventListener(eventName, handler),
+      remove: () => {
+        _backPressSubscriptions.delete(handler);
+      },
     };
   },
 
-  removeEventListener: function (
-    eventName: BackPressEventName,
-    handler: () => ?boolean,
-  ): void {
-    _backPressSubscriptions.delete(handler);
-  },
-
   mockPressBack: function () {
     let invokeDefault = true;
     const subscriptions = [..._backPressSubscriptions].reverse();
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
index 53b141bdc6d..01ea39f9f60 100644
--- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
+++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -8897,10 +8897,6 @@ type TBackHandler = {|
     eventName: BackPressEventName,
     handler: () => ?boolean
   ) => { remove: () => void, ... },
-  +removeEventListener: (
-    eventName: BackPressEventName,
-    handler: () => ?boolean
-  ) => void,
 |};
 declare module.exports: TBackHandler;
 "
diff --git a/packages/rn-tester/js/RNTesterAppShared.js b/packages/rn-tester/js/RNTesterAppShared.js
index d1dfdc900cb..e41e6cd640d 100644
--- a/packages/rn-tester/js/RNTesterAppShared.js
+++ b/packages/rn-tester/js/RNTesterAppShared.js
@@ -97,14 +97,11 @@ const RNTesterApp = ({
       return false;
     };
 
-    BackHandler.addEventListener('hardwareBackPress', handleHardwareBackPress);
-
-    return () => {
-      BackHandler.removeEventListener(
-        'hardwareBackPress',
-        handleHardwareBackPress,
-      );
-    };
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      handleHardwareBackPress,
+    );
+    return () => subscription.remove();
   }, [activeModuleKey, handleBackPress]);
 
   const handleModuleCardPress = React.useCallback(