react-navigation / react-navigation/react-navigation

The app stop working when use Animations in Tabs (new architecture)

Open
#12,102 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug library:react-native-screens platform:ios repro provided
Dominant language
TypeScript
Stars
24.5k
Forks
5.1k
Avg merge
1d 5h
Merged PRs (30d)
18

Description

Current behavior

With Native Modal the crash is triggered by navigating between the tabs without even opening the modal. After which the application stops and just freezes for iOS.
Also, it happens with a similar Accordion using react-native-reanimated

In Xcode console 2 errors:
*** Assertion failure in -[RCTViewComponentView unmountChildComponentView:index:](), /Users/denys/test/RGModal/node_modules/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm:141

More details on the videos.

It happens when I use the new architecture RCT_NEW_ARCH_ENABLED=1, but if disabled then it works well
Android looks good.

I thought at first that it was a crash with react-native-screens. Here is the opened issue: https://github.com/software-mansion/react-native-screens/issues/2280

But upgrading the react-navigation packages to 7.x RC resolved the issue for me.

https://github.com/user-attachments/assets/48f4d1c3-9afb-4632-8d62-c9cd4b589985

https://github.com/user-attachments/assets/59757472-eae7-450c-a137-15bb8046b62a

Expected behavior

react-navigation bottom tabs shouldn't crash in the new arch when using Modal or Animations

Reproduction

https://github.com/denysoleksiienko/modal-freeze-gesture

Platform
  • Android
  • iOS
  • Web
  • Windows
  • MacOS
Packages
  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-top-tabs
  • @react-navigation/stack
  • @react-navigation/native-stack
  • react-native-tab-view
Environment
  • [] I've removed the packages that I don't use
package version
@react-navigation/native ^6.1.18
@react-navigation/bottom-tabs ^6.6.1
@react-navigation/stack ^6.4.1
react-native-safe-area-context ^4.10.8
react-native-screens 3.32.0
react-native-gesture-handler ^2.18.1
react-native-reanimated ^3.14.0
react-native 0.74.4
node 20.15.0
npm or yarn 3.6.4

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked modal-freeze-gesture reproduction and the reported RCTViewComponentView unmountChildComponentView assertion on iOS with RCT_NEW_ARCH_ENABLED=1. Compare the listed React Navigation 6.x setup with the reported upgrade to 7.x RC, and verify that bottom tabs using Modal or animations no longer freeze or crash under the new architecture.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.