UI render delay for screens accessed via deep nested navigation paths with React Navigation v7 + React 19

[NikhilMasurkar]

Description

With React Navigation v7 on React Native 0.83.1 (React 19.2.0), we observe that screens render immediately when accessed via shallow navigation paths (e.g., Drawer → Screen), but render with noticeable delay when accessed through deep navigation flows involving modals and multiple nested navigators (Home → react-native -Modal → multiple stages → Screen).

The same component and data are used in both cases. API responses and state updates complete immediately, but UI rendering is deferred. This behavior did not occur prior to RN 0.82 and appears related to concurrent rendering and navigation transition scheduling.

Navigation Flow Comparison

Fast path (works as expected):

Drawer
→ Click menu item
→ Component opens
→ UI renders fast

Slow path (problematic):

Home Screen
→ Click home item
→ Stage 1: Open modal
→ Click item
→ Stage 2
→ Click item
→ Stage 3
→ Click item
→ Stage 4
→ Component opens
→ UI renders very slowly

The deeper the navigation chain (modals + nested navigators), the longer the UI render delay.

Key Observations

Same component, same data, same logic
No FlatList or large lists involved
API responses arrive immediately
State updates execute immediately
Only the UI commit is delayed
Delay increases with navigation depth
Disabling New Architecture or forcing updates with startTransition reduces the delay

Expected Behavior

UI should render immediately after state updates, regardless of how deeply nested the navigation path is.

Actual Behavior

UI rendering is noticeably delayed when the screen is accessed through deep, multi-step navigation flows involving nested navigators and modals.

react: 19.2.0
react-native: 0.83.1

@react-navigation/native: 7.1.22
@react-navigation/stack: 7.6.8
@react-navigation/bottom-tabs: 7.8.6
@react-navigation/drawer: 7.7.5

Steps to reproduce

N/A

React Native Version

0.83.1

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 26.2
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 130.83 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.2.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 11.3.0
    path: /usr/local/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.2 AI-252.25557.131.2521.14432022
  Xcode:
    version: 26.2/17C52
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.7
    path: /Library/Java/JavaVirtualMachines/jdk-21.jdk/Contents/Home/bin/javac
  Ruby:
    version: 3.4.7
    path: /usr/local/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.2
    wanted: ^20.0.0
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.1
    wanted: 0.83.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

N/A

MANDATORY Reproducer

N/A

Screenshots and Videos

WhatsApp.Video.2026-01-19.at.17.37.08.mp4

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

• For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

[mobinni]

Clarifying questions:

• Are you using native navigators or JS navigators
• Are you nesting stack navigators (This is not recommended)
• Have you tried reproducing it in isolation ?

This might be better suited to report to react-navigation?

[NikhilMasurkar]

@mobinni

Are you using native navigators or JS navigators?

We are using JS navigators, not native ones.
@react-navigation/native: 7.1.22 @react-navigation/stack: 7.6.8 @react-navigation/drawer: 7.7.5

We are not using @react-navigation/native-stack.

Are you nesting stack navigators?
We are using a common Stack → Drawer → Stack structure (auth stack wrapping a drawer with a main app stack), which follows React Navigation documentation.

We are not arbitrarily nesting multiple stack navigators.
The issue occurs due to deep navigation flows (modals + multiple pushes) inside the main stack, not because of improper stack nesting.

Have you tried reproducing it in isolation ?
Not yet in a minimal standalone repository.
The issue is consistently reproducible in our app and only appears after upgrading to RN 0.82+. We can attempt a minimal reproduction if needed.

[cortinico]

With React Navigation v7

Please open this bug against React Navigation v7