title: React navigation 6 headerRight truncated if title is too long
body: <p>I updated my application to React Navigation 6.
  In all of my screens I customised the <code>headerBackImage</code>, and added some <code>headerRight</code> with a Text.
  In React Navigation 5, if the <code>headerTitle</code> was too long, it's was directly truncated and ... was added at the end of title like this :</p>
  <p><a href="https://i.stack.imgur.com/9Y3Aq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Y3Aq.png" alt="enter image description here" /></a></p>
  <p>But in React navigation 6, it's look like this feature changed. I added some backgroundColor to show you the cutting of th Header :</p>
  <p><a href="https://i.stack.imgur.com/Wq7Wt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wq7Wt.png" alt="enter image description here" /></a></p>
  <p>I saw that topic : <a href="https://stackoverflow.com/questions/60356519/react-native-navigation-header-title-too-long-ends-up-overflowing">React Native Navigation Header title too long, ends up overflowing</a>, but maybe there is a new props added in V6.</p>
  <p>Here is my screen :</p>
  <pre><code>&lt;ProfileStack.Screen
      options={({ navigation }: ScreenProps) =&gt; ({
          headerTitle: 'My header title is not truncated why ?',
          headerTitleStyle: {
              backgroundColor: EColors.rouge,
          },
          headerBackImage: () =&gt; (
              &lt;BackButton /&gt;
          ),
          headerTitleAlign: 'center',
          headerBackTitle: ' ',
          headerRight: () =&gt; (
              &lt;Text
                  onPress={() =&gt; navigation.navigate('toOtherScreen')}
                  style={{ marginRight: 20, backgroundColor: EColors.vert }}
              &gt;
                  Infos
              &lt;/Text&gt;
          ),
      })}
      name=&quot;screenName&quot;
      component={ComponentName}
  /&gt;
  </code></pre>
  <p>Someone has encountered that in RN V6 ?</p>