Text in a custom TitleBar component does not truncate on iOS

Hi there!

We are using the TitleBar component to build a custom title bar in our app. The main part of this title is a Text component, similar to what is in the zoom example.

However, for our use case, this text is dynamic/user-generated and can get quite long. When that happens, we cannot truncate the text properly on iOS. From the zoom example:

<TitleBar style={styles.titleBar}>
  <Text style={styles.titleBarText} numberOfLines={1}>
    Erat curabitur elit cursus est in feugiat gravida, habitant hac
    morbi urna eget per sapien, enim dictum maximus fringilla fames
    suscipit.
  </Text>
  <View style={{backgroundColor: color, width: 28, height: 28}} />
</TitleBar>

My expectation is that by setting numberOfLines={1} we should get truncated text, as per the docs: https://reactnative.dev/docs/text#numberoflines. This behaviour is present outside of the TitleBar.

---

My hunch is that this has something to do about the TitleBar not properly reporting its layout to RN. When I set a breakpoint in the NVTitleBarView I can see that the frame starts quite large and then shrinks to fit the available space. Maybe RN is not receiving the newly shrunken frame?

For instance, if I add a background to just the TitleBar, it doesn’t appear to run off the page either:

and the Layout Inspector seems to confirm that:

As a way of hacking around it, I attempted to add an onLayout prop to the TitleBar. However, it only receives one event - and it’s the original big frame, not the “shrunken frame”.

---

I will dig into this some more, but please do let me know if you have any ideas!

[grahammendick]

Thanks for testing the changes and adding them to the PR

[salockhart]

Oh well done, that’s a great solution!

I’ve tested it on my end, portrait/landscape with both using the TitleBar as well as just the title prop - looks to be working great. I’ll add these changes to my PR