react native navigation v6 header title too long

This question has been asked before but 2 years ago, hence those answers are not working with current react navigation v6. As the title of the question says, the header title, when it is a long string, it just goes beyond the width of screen and doesn't respect headerRight component as well (can see in the image), but in iOS, same code, it automatically truncates and hides text behind headerRight. Below is the code I'm using:

useLayoutEffect(() => {
        navigation.setOptions({
            headerTitle: data.display_name,
            headerTitleStyle: {
                fontWeight: '600',
                fontSize: scale(20),
                color: THEME.background,
            },
            headerTitleAlign: 'left',
            headerLeft: () => (
                <TouchableOpacity
                    onPress={handleBack}
                    style={{ marginRight: 5 }}>
                    <Ionicon name="arrow-back" size={24} color="white" />
                </TouchableOpacity>
            ),
            headerRight: () =>
                (
                    <TouchableOpacity
                        style={styles.buyBtnContainer}
                        onPress={handleBuy}>
                        <Text style={styles.buy}>BUY</Text>
                    </TouchableOpacity>
                ) : null,
        });
    }, [data]);

What I tried:

1. Tried to add width: 60% inside headerTitleStyle but looks like v6 doesn't have this property, if I do add it, it just doesn't work.
2. Adjusting, truncating manually characterwise:-

headerTitle: Platform.OS === 'android'
             ? data.display_name.length <= 20
             ? data.display_name
             : data.display_name.substring(0, 20) + '...'
             : data.display_name

but due to different screen sizes, 20 pixels for 1 phone is too less for someother phone or vice-versa, so in the end, it kinda handles poorly & looks ugly...

So is there any preferred way to handle this dynamically? like how iOS does? If so please do provide solution...

package.json:

"dependencies": {
    "react": "18.0.0",
    "react-native": "0.69.2",
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/native-stack": "^6.7.0",
    "@react-navigation/material-top-tabs": "^6.2.2",
},