Long titles don't get truncated on native stack screens

[thomasttvo]

Description

on iOS:

• When the title option is used on ScreenStackHeaderConfig, then the long title works great.

• However, when we use ScreenStackHeaderCenterView, the long title overlaps the right element.

on Android:

• The long title overlaps the right element in both cases

Steps to reproduce

mentioned in description

Snack or a link to a repository

--

Screens version

3.25.0

React Native version

0.72.5

Platforms

Android, iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[tboba]

Hi @thomasttvo, thanks for submitting the issue!
Unfortunately this bug is not that easy to resolve - as for subviews of the header we're basically just using Gravity to position the elements, we're not calculating dynamically if the one subview will overlap another. Currently we've got planned something other to go around this bug, which is... to just toolbar.isTitleCentered for centerizing the title on Android (which already truncates the title) 😅
This should fully fix this bug, as i believe centerizing the title for iOS is not necessary, since iOS already have the title centered?

More or less, I think centerizing the header's title will be much better than using center view for rendering header's title.

[thomasttvo]

More or less, I think centerizing the header's title will be much better than using center view for rendering header's title.

do you mean that will fix Android in the case of using title? That's great if it works. We can switch to just using title if we need to.

Would still be great though for it to work with custom title views. Possibly wrap the subview in another view that has some dynamic measurement might be the solution.

[hugo-advizr]

we're also facing this issue, any updates on this? thanks

[kkafar]

Yeah, I think I have some insight here now (on iOS).

Recently when working on UIBackButtonDisplayMode support we've realised that this is OS behaviour when using anything custom in navigation item it disables certain native behaviours. Dunno what to do in this case yet, but it came to my mind that it might be worth trying out the new prop ☝🏻

[ApplyFrank]

still happening, I filed a bug in React Navigation, linking here since their contributor suggested I post in react-native-screens since it uses react-native-screens
react-navigation/react-navigation#12048

[kkafar]

Hey, I will update you here a bit, as we did spend some time debugging it. @alduzy please correct my message if I'm wrong at some point.

Talking Android here:

The text is properly truncated when it is mounted natively as AppCompatTextView. This happens when the title is passed as raw string (no component) and no headerLeft child is passed to header, because then we just pass the text to the Android API (AppBar.title) & it handles it.

In case when it is not properly truncated, so when you specify headerLeft component or headerTitle is a component, not raw text, we:

1. render both components as children of headerSubviewLeft,
2. render title inside a react's text view.

What's important here: react's text view is laid out by Yoga. Yoga does use flexShrink: 0 by default (in opposition to web, where flexShrink: 1 is used) & we do not specify otherwise in HeaderTitle component. Basically we encounter the very problem described in this talk. If we set flexShrink: 1 in HeaderTitle component the text will be truncated correctly unless headerRight is specified. In such case, Yoga, for some yet unknown reason, does not respect headerRight component.

If you don't have headerRight you can workaround the issue by passing headerTitle as component and passing flexShrink: 1 to the text component (container) you're using.

Possible solutions

Undecided yet.