GeekyAnts / GeekyAnts/NativeBase

Error "_reactNative.Backhander.removeEventListener is not a function"

Open
#5,826 1 comment 5 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used [patch-package](https://github.com/ds300/patch-package) to patch `native-base@3.4.28` for the project I'm working on.

I got the error "_reactNative.Backhander.removeEventListener is not a function"

Here is the diff that solved my problem:

```diff
diff --git a/node_modules/native-base/src/hooks/useKeyboardDismissable.ts b/node_modules/native-base/src/hooks/useKeyboardDismissable.ts
index f3cfa44..af443fa 100644
--- a/node_modules/native-base/src/hooks/useKeyboardDismissable.ts
+++ b/node_modules/native-base/src/hooks/useKeyboardDismissable.ts
@@ -48,12 +48,17 @@ export function useBackHandler({ enabled, callback }: IParams) {
callback();
return true;
};
+ let subscription: any;
if (enabled) {
- BackHandler.addEventListener('hardwareBackPress', backHandler);
- } else {
- BackHandler.removeEventListener('hardwareBackPress', backHandler);
+ subscription = BackHandler.addEventListener(
+ 'hardwareBackPress',
+ backHandler
+ );
}
- return () =>
- BackHandler.removeEventListener('hardwareBackPress', backHandler);
+ return () => {
+ if (subscription && typeof subscription.remove === 'function') {
+ subscription.remove();
+ }
+ };
}, [enabled, callback]);
}
```

This issue body was [partially generated by patch-package](https://github.com/ds300/patch-package/issues/296).

Contributor guide

Open the contributing guide

Research direction

Start in node_modules/native-base/src/hooks/useKeyboardDismissable.ts and inspect the useBackHandler cleanup around React Native's BackHandler API. Reproduce the error with native-base@3.4.28, then verify that enabling and disabling the hook no longer calls the missing removeEventListener method and that the reported error is gone.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.