I updated my application to React Navigation 6.
In all of my screens I customised the headerBackImage
, and added some headerRight
with a Text.
In React Navigation 5, if the headerTitle
was too long, it's was directly truncated and ... was added at the end of title like this :
But in React navigation 6, it's look like this feature changed. I added some backgroundColor to show you the cutting of th Header :
I saw that topic : React Native Navigation Header title too long, ends up overflowing, but maybe there is a new props added in V6.
Here is my screen :
<ProfileStack.Screen
options={({ navigation }: ScreenProps) => ({
headerTitle: 'My header title is not truncated why ?',
headerTitleStyle: {
backgroundColor: EColors.rouge,
},
headerBackImage: () => (
<BackButton />
),
headerTitleAlign: 'center',
headerBackTitle: ' ',
headerRight: () => (
<Text
onPress={() => navigation.navigate('toOtherScreen')}
style={{ marginRight: 20, backgroundColor: EColors.vert }}
>
Infos
</Text>
),
})}
name="screenName"
component={ComponentName}
/>
Did someone encounter that in RN V6?