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
This commit is contained in:
D N
2024-11-09 15:56:44 -08:00
committed by Facebook GitHub Bot
parent 3e27ef1f6e
commit 44d619414c
7 changed files with 14 additions and 51 deletions
@@ -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;
@@ -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;
@@ -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;
@@ -18,10 +18,6 @@ type TBackHandler = {|
eventName: BackPressEventName,
handler: () => ?boolean,
) => {remove: () => void, ...},
+removeEventListener: (
eventName: BackPressEventName,
handler: () => ?boolean,
) => void,
|};
declare module.exports: TBackHandler;
@@ -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();
@@ -8897,10 +8897,6 @@ type TBackHandler = {|
eventName: BackPressEventName,
handler: () => ?boolean
) => { remove: () => void, ... },
+removeEventListener: (
eventName: BackPressEventName,
handler: () => ?boolean
) => void,
|};
declare module.exports: TBackHandler;
"
+5 -8
View File
@@ -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(