Skip to content

Commit 23b888f

Browse files
chrsmysreact-native-bot
authored andcommitted
Fix force RTL support on new architecture. (#49455)
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](https://github.com/facebook/react-native/blob/acdddef48eb60b002c954d7d2447cb9c2883c8b3/packages/react-native/React/Views/RCTRootShadowView.m#L18) which were recreated on bundle reload. ## Related Issues: - react-native-community/discussions-and-proposals#847 - #49451 - #48311 - #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](https://github.com/facebook/react-native/blob/acdddef48eb60b002c954d7d2447cb9c2883c8b3/packages/react-native/React/CoreModules/RCTI18nManager.mm#L52) 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. <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: #49455 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", }, }); ``` https://github.com/user-attachments/assets/0eab0d79-de3f-4eeb-abd0-439ba4fe25c0 Reviewed By: cortinico, cipolleschi Differential Revision: D69797645 Pulled By: NickGerleman fbshipit-source-id: 97499621f3dd735d466f5119e0f2a0eccf1c3c05
1 parent edea009 commit 23b888f

File tree

1 file changed

+1
-0
lines changed

1 file changed

+1
-0
lines changed

packages/react-native/React/Fabric/Surface/RCTFabricSurface.mm

+1
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ - (RCTSurfaceView *)view
142142

143143
if (!_view) {
144144
_view = [[RCTSurfaceView alloc] initWithSurface:(RCTSurface *)self];
145+
[self _updateLayoutContext];
145146
_touchHandler = [RCTSurfaceTouchHandler new];
146147
[_touchHandler attachToView:_view];
147148
}

0 commit comments

Comments
 (0)