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

Text within button is truncated by default if character length of text is a multiple of 5 #4395

Open
ClaudiaSkyeB opened this issue May 2, 2024 · 2 comments
Labels

Comments

@ClaudiaSkyeB
Copy link

Current behaviour

This issue is only found on certain devices. So far I've seen it happen on a physical Mobicell Legend Pro Lte on Android 11 and with an emulated Galaxy Nexus API 30 device with a 720p 4.65 display with Android 11.

The text within a button is truncated if character length of text is a multiple of 5.

For example; if I have two buttons next to each other the one with the text "Register" and the other one with text "Login". The "Login" button text gets truncated but not the "Register" button text.

I have a hacky fix, but having it actually fixed would be preferred especially for future buttons.

Expected behaviour

The expected behaviour is for the text in the button to not be truncated.

How to reproduce?

  1. Create an emulated Galaxy Nexus API 30 device with a 720p 4.65 display with Android 11 on Android Studio.
  2. Create a button with a text component within it.
  3. Within the text component, add a single word with text length that is a multiple of 5 (5, 10, 15 etc).

Preview

Screenshot 2024-05-02 115159

What have you tried so far?

  1. Changed text length to not be a multiple of 5 by adding a space before and after the word. This works, but having an actual fix for this issue would be better.
  2. On another issue someone suggested setting letterSpacing to any value except 0.1. But our letter spacing is set to 0, so it's not a relevant fix for this issue.
  3. Changed device font size. The font size is set to default and was tested with different device font size scaling. So it's not due to the device font size scaling.

Your Environment

software version
ios not applicable
android 11
react-native 0.73.6
react-native-paper 5.12.3
node 20.9.0
npm 10.1.0
expo sdk 50.0.17
@JPStrydom
Copy link

Strange that this issues has been around for so long. Seems like it might be related to 15114. Hopefully it's something the RN team can address 🤞

@Steven-MKN
Copy link

Does this still exist? gonna need sample code because the button seems fine on my side

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants