diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt index 8ab37c8869..3eb6cc66e1 100644 --- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt +++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt @@ -138,6 +138,7 @@ class ScreenStackHeaderConfig( } val isBackButtonDisplayed = toolbar.navigationIcon != null + val isRtl = toolbar.layoutDirection == LAYOUT_DIRECTION_RTL val contentInsetStartEstimation = if (isBackButtonDisplayed) { @@ -149,8 +150,11 @@ class ScreenStackHeaderConfig( // Assuming that there is nothing to the left of back button here, the content // offset we're interested in in ShadowTree is the `left` of the subview left. // In case it is not available we fallback to approximation. + // In RTL, the LEFT subview (Gravity.START) sits on the physical right, so we + // convert its physical `left` to a logical start-side distance. val contentInsetStart = - configSubviews.firstOrNull { it.type === ScreenStackHeaderSubview.Type.LEFT }?.left + configSubviews.firstOrNull { it.type === ScreenStackHeaderSubview.Type.LEFT } + ?.let { if (!isRtl) it.left else toolbar.width - it.left } ?: contentInsetStartEstimation val contentInsetEnd = toolbar.currentContentInsetEnd + toolbar.paddingEnd diff --git a/apps/src/tests/issue-tests/Test3438.tsx b/apps/src/tests/issue-tests/Test3438.tsx new file mode 100644 index 0000000000..0b2ec80b67 --- /dev/null +++ b/apps/src/tests/issue-tests/Test3438.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import { + View, + Text, + StyleSheet, + I18nManager, + Button, + DevSettings, +} from 'react-native'; +import { NavigationContainer } from '@react-navigation/native'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; + +const Stack = createNativeStackNavigator(); + +function toggleRTL(forceRTL: boolean) { + if (I18nManager.isRTL === forceRTL) return; + I18nManager.forceRTL(forceRTL); + I18nManager.allowRTL(forceRTL); + DevSettings.reload(); +} + +function HeaderTitle() { + return ( + Custom Title + ); +} + +function HomeScreen() { + return ( + + Issue #3438 + headerTitleAlign: center + headerTitle as function + RTL mode: {I18nManager.isRTL ? 'YES' : 'NO'} + + The header title above should say "Custom Title". + {'\n'}If it's missing or there's extra space, the bug is present. + + +