React navigation 6 headerRight truncated if title is too long
Asked Answered
D

0

7

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 :

enter image description here

But in React navigation 6, it's look like this feature changed. I added some backgroundColor to show you the cutting of th Header :

enter image description here

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?

Diedra answered 29/12, 2021 at 9:42 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.