Text within button is truncated by default if character length of text is a multiple of 5 #4395
Description
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?
- Create an emulated Galaxy Nexus API 30 device with a 720p 4.65 display with Android 11 on Android Studio.
- Create a button with a text component within it.
- Within the text component, add a single word with text length that is a multiple of 5 (5, 10, 15 etc).
Preview
What have you tried so far?
- 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.
- 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.
- 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 |