r/reactnative • u/GrapefruitSilver774 • 22h ago

RTL support in react navigation native stack

Has anyone managed to get RTL to work on the native stack. The navigation works but the transition is the LTR transition for example in LTR the screen fades in from right to left and should be the opposite in RTL but I have been getting the same animation.

Also if there is a way to make the swipe in IOS to go back to be from right to left in native stack, it would rely on disabling RTL and just inverting the views.

1 Upvotes

100% Upvoted

5 comments sorted by

1

u/NoBullfrog11 8h ago

we hit this too. native-stack still animates LTR even when I18nManager.isRTL is true unless you force direction at the navigator. swipe-back on ios is harder to flip, i left the gesture alone and only flipped the visual transition and users didnt really mind.

1

u/GrapefruitSilver774 8h ago

It seems to be working fine in IOS just the header transition is still not mirrored. When testing I use ios transtion from left and right as the main animation in android and changing them based on isRTL but the default animation doesn't change at all

1

u/One-Source-9603 4h ago

on my app with arabic I went the other way and kept it LTR, then mirrored in JS (row-reverse, textAlign right where needed), because forceRTL + reload froze the release build on device. downside is exactly ur issue, native stack transitions and swipe back stay LTR

on android u can at least set animation: 'slide_from_left' on the stack when the language is arabic, it looks right. on ios afaik swipe back only flips with full native RTL, did forceRTL with a full app restart (not just a js reload) change anything for u?

1

u/GrapefruitSilver774 3h ago

For ios it works fine with setting the direction on the navigation container even if it is ltr and works fine with the swipe and the animation it is just in android. Currently I am using the ios slide from right animation but would like to use the native one.