[iOS] Fix force RTL support on new architecture.

[chrsmys]

Summary

This fixes an issue in Fabric where changing the layout direction and then reloading the JS bundle did not honor the layout direction until the app was restarted on iOS. This now calls _updateLayoutContext whenever RCTSurfaceView is recreated which happens on bundle reload. This is not an issue on the old architecture because the layout direction is determined within the SurfaceViews which were recreated on bundle reload.

Related Issues:

• New Arch / Yoga RTL support. react-native-community/discussions-and-proposals#847
• rtl to ltr not working on latest version(0.77) until manual refresh #49451
• [New Arch] RTL to LTR of vise versa Layout Direction Change Requires App Termination to Apply #48311
• RTL Layout Direction Not Updating after app reload with New React Native Architecture #45661

How can we take this further?

If we want to make it so that it doesn't require an entire bundle reload for RTL to take effect I believe these are the steps that would need to be taken:

• Make it so RCTI18nManager exports isRTL as a method instead of consts
• Send Notification Center notif when RTL is forced on or off
• Listen for that notification RCTSurfaceView and call _updateLayoutContext similar to UIContentSizeCategoryDidChangeNotification.

Changelog:

[iOS] [FIXED] - Layout direction changes are now honored on bundle reload.

Test Plan:

On the new architecture change force the layout direction and reload the bundle:

import React, { useCallback } from "react";
import { Button, I18nManager, StyleSheet, Text, View } from "react-native";
import RNRestart from "react-native-restart";

export default function Explore() {
    const onApplyRTL = useCallback(() => {
        if (!I18nManager.isRTL) {
            I18nManager.forceRTL(true);
            RNRestart.restart();
        }
    }, []);

    const onApplyLTR = useCallback(() => {
        if (I18nManager.isRTL) {
            I18nManager.forceRTL(false);
            RNRestart.restart();
        }
    }, []);

    return (
        <View style={styles.area}>
            <Text>Test Block</Text>
            <View style={styles.testBlock}>
                <Text>Leading</Text>
                <Text>Trailing</Text>
            </View>
            <Button title={"Apply RTL"} onPress={onApplyRTL} />
            <Button title={"Apply LTR"} onPress={onApplyLTR} />
        </View>
    );
}

const styles = StyleSheet.create({
    area: {
        marginVertical: 50,
        paddingHorizontal: 24,
    },
    testBlock: {
        paddingVertical: 10,
        flexDirection: "row",
        justifyContent: "space-between",
    },
});

Simulator.Screen.Recording.-.iPhone.16.Plus.-.2025-02-16.at.14.05.30.mp4

[cipolleschi]

@NickGerleman can you have a look at this? From our internal discussions, I kind of understood that the fix should rely in Yoga/ShadowNode and not in the components' superclass, but you have more experience than me in this area.

[NickGerleman]

This seems perfectly sane to me. I18nManager change should effect root constraint like this, which influences call to YGNodeCalculateLayout, instead of anything in the Yoga tree explicitly.

The followups to support this without reload also make sense! Fabric Android, last I tested, may actually do this already without bundle reload, but I'm not sure this behavior was explicit as much as emergent.

[facebook-github-bot]

@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[a-eid]

@chrsmys Thank you for this contribution, I will patch my local RN & report back the results. also making RTL LTR direction changes without needing a bundle reload would be perfect. however it'll also require work for android.

[facebook-github-bot]

@NickGerleman merged this pull request in 36f29be.

[react-native-bot]

This pull request was successfully merged by @chrsmys in 36f29be

^{When will my fix make it into a release? | How to file a pick request?}

[PranavAvasthi]

@cipolleschi @chrsmys When will this be released?

[SalmanFaris53]

For me still its not working...drawermenu is not changing , bottom tab is not changing like from ltr to rtl

[PranavAvasthi]

@a-eid Have you tried this? If Yes, can you update that is it working or not?

[cipolleschi]

We cut the branch for 0.79 yesterday. 0.79 will be out the week of the 7th of April, if nothing major happen.

If you want the fix to be backported, please open a pick request. Please open a different pick request for each version you'd like for the fix to be backported.

[ahmamedhat]

I tried this and its not working with bottom tabs

[a-eid]

@PranavAvasthi @ahmamedhat I have tried the fix and it seem to be working as expected.

[ahmamedhat]

@a-eid Please if you can tell me how did you try it? maybe I'm missing something

[a-eid]

@ahmamedhat I added the following patch, recompiled my project and it just worked.

diff --git a/React/Fabric/Surface/RCTFabricSurface.mm b/React/Fabric/Surface/RCTFabricSurface.mm
index 7b3ce5918ce5a159ef364cec030dd1dd00d587bb..3906df778bcd03038c9fd49fb52346cc252f2489 100644
--- a/React/Fabric/Surface/RCTFabricSurface.mm
+++ b/React/Fabric/Surface/RCTFabricSurface.mm
@@ -143,6 +143,7 @@ - (RCTSurfaceView *)view
 
   if (!_view) {
     _view = [[RCTSurfaceView alloc] initWithSurface:(RCTSurface *)self];
+    [self _updateLayoutContext];
     _touchHandler = [RCTSurfaceTouchHandler new];
     [_touchHandler attachToView:_view];
   }

[react-native-bot]

This pull request was successfully merged by @chrsmys in 23b888f

^{When will my fix make it into a release? | How to file a pick request?}

[1880akshay]

@cortinico when will the release (0.76.8 probably) happen with this fix?

[a-eid]

@chrsmys I am facing this weird issues sometimes where when I forceRTL to either true or false, I18nManager.isRTL doesn't update properly... however the layout does... any idea what might cause this ?

[chrsmys]

@chrsmys I am facing this weird issues sometimes where when I forceRTL to either true or false, I18nManager.isRTL doesn't update properly... however the layout does... any idea what might cause this ?

Are you reloading the bundle afterwards? At the moment that is a requirement. This weekend I may look into the additional fixes to make this unnecessary (Referenced in "How can we take this further?" section).

[a-eid]

@chrsmys Yes. Keep in mind that everything works fine after a reload. Elements that are laid out from left to right correctly switch to right to left. However, I18nManager.isRTL does not update, which causes issues with elements like arrows and the iOS navigation transition direction.

[chrsmys]

Can you file a new issue with a small repro project? I can take a look this weekend.

[SalmanFaris53]

i too getting the issue in the ios | arrows are not changing but in android its work fine also the drawer will be open by half when we switch between rtl and ltr

…

On Fri, 21 Mar 2025 at 15:27, Chris Mays ***@***.***> wrote: Can you file a new issue with a small repro project? I can take a look this weekend. — Reply to this email directly, view it on GitHub <#49455 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBB2VB3AMZ6HBQHH2TQ7YVT2VPZQNAVCNFSM6AAAAABXH4LDMOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONBTGA4DOMZTHE> . You are receiving this because you commented.Message ID: ***@***.***> [image: chrsmys]*chrsmys* left a comment (facebook/react-native#49455) <#49455 (comment)> Can you file a new issue with a small repro project? I can take a look this weekend. — Reply to this email directly, view it on GitHub <#49455 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBB2VB3AMZ6HBQHH2TQ7YVT2VPZQNAVCNFSM6AAAAABXH4LDMOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONBTGA4DOMZTHE> . You are receiving this because you commented.Message ID: ***@***.***>

[a-eid]

@SalmanFaris53 that's because arrows & drawers direction is depending on I18nManager.isRTL boolean flag, which doesn't update some times.

[a-eid]

@chrsmys I've created a repro, I am working on my STR, cuz it doesn't always happen.

cc @SalmanFaris53 let me know if you're able to help.

[KarinaOliinykCommandpost]

I also have this issue on iOS

[baraa-rasheed]

@a-eid The UI is being updated correctly but the native-stack navigator is not, you can test this by setting the headerLargeTitle to true and try to change the RTL direction.

[a-eid]

@baraa-rasheed everything is updating for me just fine, however sometimes I18nManager.isRTL doesn't update correct. which affects the navigation direction. not sure why. hopefully @chrsmys will have an update soon.

[cipolleschi]

Stack navigator is part of react-avigation, is it perhaps worth opening an issue in the react-navigation repository.

[fawwazAlkarmy]

I have still an issues with RTL on IOS , i'm using
"expo": "^52.0.44",
"react-native": "0.76.9",

on first run the layout isn't correct , after i reload it works fine the layout changes , however not all elements works correctly, for example the same Text component works correctly in some places and doesn't in others, i don't know why i have this weird issue till now, any help will be appreciated.