Fix drawer navigation for React Native 0.81 New Architecture #752
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
Author
|
/azp run |
|
Azure Pipelines successfully started running 1 pipeline(s), but failed to run 1 pipeline(s). |
chrisglein
approved these changes
Dec 2, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Why
The drawer navigation (hamburger menu) in the Gallery app became invisible after upgrading to React Native 0.81 with the New Architecture enabled. When clicking the hamburger button, the animation would run but the drawer content was not visible. This was caused by two breaking changes in React Native 0.81:
Yoga 3.0 Layout Engine Change: The layout engine now follows strict W3C CSS standards. Using height 100% on absolutely positioned elements resolves to zero when the parent has no explicit height. This made the drawer have zero height and become invisible.
Reference: https://www.yogalayout.dev/blog/announcing-yoga-3.0
Reference: https://www.yogalayout.dev/docs/advanced/containing-block
Fabric Renderer Stacking Order Change: The new Fabric renderer follows strict DOM render order for visual stacking. Elements rendered later in JSX appear on top. Our drawer was rendered before the main content, so the main content was covering the drawer.
Reference: [0.82.0] Different behavior of views with position: "absolute" between old and new architecture facebook/react-native#54174
What
Changed render order: Moved drawer elements to render AFTER the main content children so they appear on top in the new Fabric stacking model.
Fixed absolute positioning: Replaced height 100% with top 0 bottom 0 left 0 right 0 for absolute positioned elements. This works reliably in Yoga 3.0 regardless of parent height.
Added flex layout: Added flex 1 to root container and child content wrapper to provide proper dimensions for the layout hierarchy.
Simplified structure: Removed unnecessary wrapper View that was interfering with the containing block hierarchy.
Backward Compatibility: These changes are backward compatible with React Native 0.80 and earlier versions. The flex and absolute positioning patterns used work identically in older versions.
Screenshots