Description

In RTL mode, if headerTitleAlign is set to center and headerTitle is defined as a function, the title isn’t displayed and the header gains extra spacing.

<Stack.Navigator 
    screenOptions={{
      headerTitle: () => (
        <View>
          <Text>Elo elo</Text>
        </View>
      ),
      headerRight: () => (
        <View>
          <Text>Right</Text>
        </View>
      ),
      headerTitleAlign: 'center',
    }}
  >
  (...)
  </Stack.Navigator>

Interestingly, using a string for headerTitle makes the header render properly in RTL as well.

  <Stack.Navigator 
    screenOptions={{
      headerTitle: 'Elo elo',
      headerRight: () => (
        <View>
          <Text>Right</Text>
        </View>
      ),
      headerTitleAlign: 'center',
    }}
  >
  (...)
  </Stack.Navigator>

On the other hand, header is rendered properly with both types in LTR.

Steps to reproduce

• Use native stack navigator with headerTitleAlign: 'center' and pass a function toheaderTitle
• Use RTL

Snack or a link to a repository

https://github.com/kkosobudzki/rtl-navigation

Screens version

4.18.0

React Native version

0.82.1

Platforms

Android

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes