GeekyAnts / GeekyAnts/NativeBase

BackHandler.removeEventListener issue for React Native 0.77 version and above

Open
#5,829 0 comments 7 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.

Here is the diff that solved my problem:
**Original Issue**
```original
useEffect(() => {
let backHandler = () => {
callback();
return true;
};

if (enabled) {
BackHandler.addEventListener('hardwareBackPress', backHandler);
} else {
BackHandler.removeEventListener('hardwareBackPress', backHandler);
}
return () =>
BackHandler.removeEventListener('hardwareBackPress', backHandler);
}, [enabled, callback]);
```

**Solution**
```diff
useEffect(() => {
let backHandler = () => {
callback();
return true;
};

if (!enabled) return;

const backListener = BackHandler.addEventListener('hardwareBackPress', backHandler);

return () => backListener.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 by locating the BackHandler.addEventListener usage shown in the issue and review how its cleanup is handled in React Native 0.77 and above. Update the listener cleanup to use the returned subscription's remove method, then verify that enabling, disabling, and component unmounting no longer leave a back-handler listener active.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.