Text within button is truncated by default if character length of text is equal to 10

[goofygoobers]

Current behaviour

This issue is specifically found when emulating an Samsung S22 device.
When the text is exactly 10 characters long, it is automatically truncated.

Expected behaviour

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

How to reproduce?

1. Create a samsung galaxy s22 device on android studio with this skin (Galaxy 22) https://developer.samsung.com/galaxy-emulator-skin
2. Create a button with a text component within it.
3. Within the text component, add a single word with exactly 10 characters.

https://snack.expo.dev/9wx1ycteed

Preview

As shown below, the "Statements" button on the second row is truncated.

This is not a problem on IOS simulator as shown below.

What have you tried so far?

1. I've checked on IOS simulator, it doesn't seem to be a problem there.
2. This is also not a problem on Pixel android devices i've emulated on.

Your Environment

software	version
ios	15.4
android	13
react-native	"0.69.3",
react-native-paper	5.0.0-rc.6
node	v18.7.0
npm	8.15.0
expo sdk	Not using

[lukewalczak]

Hey @goofygoobers, does the issue exists on the stable v5 e.g. 5.1.0?

[sapjax]

Hey @goofygoobers, does the issue exists on the stable v5 e.g. 5.1.0?

5.1.2 still has this issue.
the problem exists on my actual android device, but it does not exist on the Android simulator.

[lukewalczak]

5.1.2 still has this issue.
the problem exists on my actual android device, but it does not exist on the Android simulator.

Could you please try to investigate the issue once you're able to reproduce the problem?

[sapjax]

5.1.2 still has this issue.
the problem exists on my actual android device, but it does not exist on the Android simulator.

Could you please try to investigate the issue once you're able to reproduce the problem?

I think it's an issue with React Native itself, currently, I found three ways to get around this problem:

1. add a space to the end of the button text, like <Button>Connect </Button>
2. set uppercase to the button, <Button uppercase>Connect</Button>
3. set letterSpacing to any value except 0.1.

So I avoid this issue by custom theme now:

const fontConfig = {
  titleSmall: {
    letterSpacing: 0.101
  },
  labelLarge: {
    letterSpacing: 0.101
  }
}

export default {
  ...MD3LightTheme,
  fonts: configureFonts({ config: fontConfig, isV3: true })
}

[lukewalczak]

Hey @sapjax, thanks for your input! Were you able to observe the same issue with the regular react-native's Text / Touchable / Pressable component, when letterSpacing is set to 0.1? What device/emulator are you using?

[sapjax]

Hey @sapjax, thanks for your input! Were you able to observe the same issue with the regular react-native's Text / Touchable / Pressable component, when letterSpacing is set to 0.1? What device/emulator are you using?

react-native's Text / Touchable / Pressable component has no problem when letterSpacing is set to 0.1, Only occurs when using react-native-paper's Button component.
my device is “OnePlus Ace PGKM10” with Android v12.1.

After some tests, I found that the problem is caused by the ColorOS system of OnePlus which is a customized Android system.

On Android, users can adjust the font size and font display size in settings, but ColorOS can override all font-family in settings, and the default font display size is bigger than normal:

if I lower the display size or change font-family from Roboto to Sans in the picture above, both will fix this issue.

[lukewalczak]

Closing the issue, since the problem is related to the specific device and its internal display settings, so it's hard to apply the fix, which will fit in all the users cases.

The mentioned solution can be applied manually to the projects, which are affected by that problem.

[surbhidavara99]

I am having the same issue in iOS if I am testing in the simulator it's not getting ellipsis but in real devices, the text is cutting. sharing screenshot here.

Device info: iPhone SE(15.7.8)

[rickymohk]

Also having this issue with text length of every multiple of 5, when system font size is set to "Default".

[ClaudiaSkyeB]

I'm also having this issue with text length of every multiple of 5, when system font size is set to "Default". So far I've noticed it on the 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 only way I was able to fix it so far was to add spaces to increase the text length. The letterspacing wasn't the problem in my case. Would be very cool if we can get a fix for it.

[rayoogmy]

I am seeing this too. This is on react-native-paper 5.13.1.