fix: bounds transitions are mirrored in RTL#134
Closed
AlshehriAli0 wants to merge 1 commit into
Closed
Conversation
✅ Deploy Preview for rnst-docs canceled.
|
Contributor
Author
Owner
|
Cherry picked and released in v3.10 thank you! |
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
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.
Problem
On apps running in native RTL (
I18nManager.isRTL), every bounds/zoom transition is horizontally mirrored. An element sitting on the left side of the screen opens from the right, dismisses to the right, then snaps to its real position when the transition pair tears down. Drag gestures track the finger correctly the whole time.Cause
The translate math works in physical page coordinates measured from the left edge of the screen, but three fixed width boxes assume a physical top-left anchor, and RTL layout moves that anchor to the right edge:
portal-boundary-host.tsx: the teleported clone is absolutely positioned withleft: 0plus an explicit source width. With RN's defaultdoLeftAndRightSwapInRTL,left: 0becomes a right edge anchor in RTL, so the clone's base isscreenWidth - widthinstead of 0.maybe-masked-navigation-container.tsx: the navigation mask element is a fixed width flex child, and cross axis flex-start is the right edge in RTL.masked-view.tsx(deprecated): same pattern as the mask above.Fix
Pin these boxes to the physical left edge when RTL is active. In RTL,
end: 0always means the physical left edge, regardless of the swap setting. The LTR code path is byte identical to before.I18nManager.isRTLis fixed at app launch, so reading it at module scope is safe with worklets.With this change the package works perfectly in RTL apps, which opens it up to a whole set of locales it did not support well before.
Why not fix the transform math instead
translateXphysically, not mirrored. Negating the transforms fixes the flight but breaks the gestures (tried it).pageXsends the flight off screen, so Fabric measurements are physical too (also tried).Found in a production RTL app, where we have been running this fix as a local patch and it works perfectly. Verified on an Android device with an Arabic locale: grid to detail zoom with
escapeClippingandnavigationMaskEnabled, open, dismiss, and all drag gestures correct, LTR unchanged.bun run lintandbun run typecheckpass.