Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Long titles don't get truncated on native stack screens #1946

Open
thomasttvo opened this issue Oct 23, 2023 · 5 comments
Open

Long titles don't get truncated on native stack screens #1946

thomasttvo opened this issue Oct 23, 2023 · 5 comments
Labels
Missing info The user didn't precise the problem enough Missing repro This issue need minimum repro scenario Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS

Comments

@thomasttvo
Copy link

thomasttvo commented Oct 23, 2023

Description

on iOS:

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

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

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 github-actions bot added Missing repro This issue need minimum repro scenario Missing info The user didn't precise the problem enough labels Oct 23, 2023
@github-actions
Copy link

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
Copy link

github-actions bot commented Oct 23, 2023

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.

@github-actions github-actions bot added Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS labels Oct 23, 2023
@thomasttvo thomasttvo changed the title Long titles don't get truncated on native screens Long titles don't get truncated on native stack screens Oct 23, 2023
@tboba
Copy link
Member

tboba commented Oct 24, 2023

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
Copy link
Author

thomasttvo commented Oct 24, 2023

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Missing info The user didn't precise the problem enough Missing repro This issue need minimum repro scenario Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS
Projects
None yet
Development

No branches or pull requests

3 participants