Skip to content

fix: BackHandler crash on RN 0.79+ — replace react-native-modal with core Modal - #61

Open
shaiunterslak wants to merge 1 commit into
chatwoot:developfrom
shaiunterslak:fix/backhandler-crash-core-modal
Open

shaiunterslak wants to merge 1 commit into
chatwoot:developfrom
shaiunterslak:fix/backhandler-crash-core-modal

Conversation

@shaiunterslak

Copy link
Copy Markdown

Fixes #52 (same crash as the accidentally-closed #53).

Problem

react-native-modal@13.0.1 still calls BackHandler.removeEventListener in componentWillUnmount. React Native deprecated it in 0.77 and has since removed it, so closing the widget crashes any app on RN 0.79+ / Expo SDK 53+:

TypeError: _reactNative.BackHandler.removeEventListener is not a function (it is undefined)

Today every consumer has to carry a patch-package fix for this (we run this widget in four production apps and each one needs the patch).

Why not bump react-native-modal

  • 13.0.2 contains the fix but is deprecated on npm as "mistakenly released", which is exactly why the current ^13.0.1 range keeps resolving to the broken 13.0.1.
  • 14.x only exists as release candidates (14.0.0-rc.1), and the library is in low-maintenance mode.

Fix

The widget only renders a full-screen modal and uses four props, all of which React Native's built-in Modal covers — so this drops the dependency entirely:

react-native-modal core Modal
isVisible visible
onBackButtonPress onRequestClose (Android back)
default slideInUp/slideOutDown animationType="slide"
coverScreen, backdropColor, margin: 0 style unnecessary — core Modal is full-screen by default

onBackdropPress is dropped: with coverScreen + full-screen styling there is no visible backdrop to press, so it was dead code. Consumers also lose the react-native-modal + react-native-animatable subtree from their installs, and the patch-package workaround becomes unnecessary.

Example/ carries a vendored copy of the same component, so it gets the same change; its package-lock.json also picks up the pre-existing ^0.0.20 manifest sync.

Testing

  • Render tests in a real RN 0.81 jest environment: widget mounts with the webview, onRequestClose fires closeModal, and unmounting no longer crashes (the old crash fired in componentWillUnmount).
  • eslint clean on the changed files.
  • We run this widget (with the equivalent behavior) in four production React Native apps (RN 0.81–0.85, Expo SDK 54–56).

🤖 Generated with Claude Code

… RN 0.79+)

react-native-modal 13.0.1 still calls BackHandler.removeEventListener in
componentWillUnmount; React Native deprecated it in 0.77 and removed it,
so closing the widget crashes any app on RN 0.79+ / Expo SDK 53+ (chatwoot#52).

A dependency bump is not clean: 13.0.2 is deprecated on npm as
"mistakenly released" (so ^13.0.1 keeps resolving to 13.0.1) and 14.x is
still an RC. The widget only uses a full-screen modal with four props, so
React Native's built-in Modal covers it with zero dependencies:

- isVisible          -> visible
- onBackButtonPress  -> onRequestClose (Android back)
- slideInUp default  -> animationType="slide"
- coverScreen/backdropColor/margin:0 -> unnecessary (full-screen Modal)

onBackdropPress is dropped: a coverScreen full-screen modal has no
visible backdrop to press. This also removes the react-native-modal /
react-native-animatable subtree from consumers.

Verified with render tests in an RN 0.81 jest environment: mounts with
the webview, Android back triggers closeModal, and unmounting no longer
crashes.

Fixes chatwoot#52

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d80555e205

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread package.json
"dependencies": {
"react-native-modal": "^13.0.1"
},
"peerDependencies": {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Add prop-types as a direct dependency

Removing the only runtime dependencies block also removes the transitive provider for prop-types, but the published entry path still imports prop-types from src/App.js and src/WebView.js. In a fresh consumer app that does not already install prop-types, Metro will fail to resolve the widget immediately after this package is imported; add prop-types as a direct dependency or remove those runtime imports.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

BackHandler Error while closing Chatwoot

1 participant