Skip to content

README.md

Latest commit

 

History

History
98 lines (71 loc) · 7.57 KB

README.md

File metadata and controls

98 lines (71 loc) · 7.57 KB

New Architecture Navigation Layout Issues

Update (2026-03-24): Retested on Expo SDK 55 — all issues appear to be fixed.

Expo 55 Retest Results

After upgrading from Expo SDK 52 to SDK 55 (React Native 0.83.2, react-native-screens ~4.23.0), all five issues were retested on:

  • iOS Simulator (iOS 26)
  • Android device Both running via Expo Go.
Issue Status Notes
1. iOS Modal Screen Height Fixed Modal screens render at correct height
2. View Height Flickering Fixed No flickering during navigation or button presses
3. headerLeft Pressable Issues Fixed hitSlop works as expected
4. dismissTo breaks navigation Fixed Navigation stack behaves correctly
5. Inconsistent Android Screen Height Fixed Screen heights are consistent

Found one issue during re-test where view flickers on dismiss on Android:

Android Retest
Screen_Recording_20260324_152332_Expo.Go.mp4

Original Issues (Expo SDK 52)

The issues below were originally documented on Expo SDK 52 with New Architecture enabled. They were filed against react-native-screens and related libraries. If you arrived here from one of those issues, note that upgrading to Expo SDK 55 resolves them.

Issue 1: iOS Modal Screen Height

  • green routes which have presentation: "modal" are rendered too tall. Notice how the dark green view should be pinned to the bottom, but it is rendered off screen.
  • Navigate to green, then green/modal, then dismiss back to green. Notice how the height corrects itself. However, subsequent navigation to green/modal causes the height to flicker during transition, showing the incorrect height briefly.
  • This issue only affects iOS. It happens consistently.
  • Related Issues
Screenshot Video
ios-modalheightissue.mov

Issue 2: View Height Flickering

Video
ios-flicker.mov

Issue 3: headerLeft Pressable Issues

  • hitSlop often does not work for headerLeft Pressables. This is easier to reproduce on red than green, strangely.
  • See video where I'm repeatedly clicking, but the press does not get picked up within the expected hitSlop={20} radius.
  • This issue affects both iOS and Android

software-mansion/react-native-screens#1981

Video
ios-headerleft-hitslop.mov

Issue 4: dismissTo breaks navigation stack / freezes screen

  • Steps to reproduce:
    • Navigate to blue
    • Navigate to blue/subroute
    • Present green/modal
    • dismissTo(blue)
  • On Android This causes several major issues. You'll see blue/subroute is still mounted behind blue/index with major layout issues. Then after tapping around the screen freezes and won't receive any touches. After navigating away and back, the screen goes blank.
  • On iOS this breaks the stack order. You'll see blue/index shown, but then blue/subroute is now behind it in the stack, and hitting 'back' once will weirdly dismiss both screens.

software-mansion/react-native-screens#2578

Android iOS
android-dismiss-break.mov
ios-dismisstoissue.mov

Issue 5: Inconsistent Android Screen Height

  • Multiple instances where Android screens are rendered with incorrect height, which changes as we navigate around and is often inconsistent / sporadic.
  • Consistent repro:
    • Navigate to blue
    • Navigate to blue/subroute
    • Dismiss back to blue. Notice how the screen's height changes with the bottom bar no longer pinned to the bottom.
  • We're able to consistently reproduce this issue on Android for the blue Stack routes as seen, but in other apps we've also seen inconsistent screen heights in Modal screens too.
    • See second video for green modal issue captured on an older Samsung S9 - notice the green bar on green/modal renders taller initially. This was not as consistent to reproduce.
  • This issue might be related to Issue 1: iOS Modal Screen Height, but the behavior is different enough to warrant separate documentation.
Stack Screen Modal Screen
android-blue-bottom-issue.mov
android-green-bottom-issue.mov
⚡