Text Component ellipsis is not displayed correctly in Android using custom font (the three dots are cut-off)

[alexxxwork]

Description

This is a duplicate report of this old bug #33487 on a current version of RN

When I use custom font and set numberOfLines={1} on a Text component, if the parent's component width is fixed, sometimes the ellipsis is cut-off strangely. For example, in the below screenshot, you can see that only 1 and a half dots of the ellipsis are shown.

It seems to only happen on Android

Expo Go:

React Native Version

0.71.3

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: Windows 10 10.0.19045
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Memory: 550.20 MB / 7.85 GB
Binaries:
Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Watchman: 20220918.223204.0 - C:\ProgramData\chocolatey\bin\watchman.EXE
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Disabled
AllowAllTrustedApps: Disabled
IDEs:
Android Studio: AI-221.6008.13.2211.9514443
Visual Studio: 15.7.27703.2026 (Visual Studio Community 2017)
Languages:
Java: 17.0.6 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.3 => 0.71.3
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

add custom font assets and run a minimum code example

Snack, code example, screenshot, or link to a repository

Expo link
It doesn't reproduce on web android emultator but reproduces when running on physical device through expo.
Font file:
ExpensifyNewKansas-Medium.zip

import React from 'react';
import {Text, View} from 'react-native';

function App(): JSX.Element {
  return (
    <View
      style={{
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
      }}>
      <View style={{width: 173, padding: 24, backgroundColor: 'blue'}}>
        <Text
          style={{fontSize: 30, fontFamily: 'ExpensifyNewKansas-Medium'}}
          numberOfLines={1}>
          This text will be cut-off strangely in Android
        </Text>
      </View>
    </View>
  );
}

export default App;

[alexxxwork]

Recreated #36336 with a minimum code example and latest RN version

[BeeMargarida]

I'm investigating this issue and can only replicate it in my Xiaomi device (can't replicate in any emulator - even using the same Android version - nor in any other physical device I have around).

I started by replicating the same scenario in a clean Android app, since it could be an Android bug and not a RN one, and there are 2 bugs reported in the Android issue tracker that are similar to this one(1, 2).
In the Android project I can't replicate the bug, so I'll keep investigating on the RN side. However, I'm not totally sure if my replication is totally 1:1, so if anyone wants to take a look and give their opinion, I would greatly appreciative it. I'll keep investigating.

TestEllipsis.zip

[alexxxwork]

@BeeMargarida Hi! Have you tried to launch this expo link on your device?
I don't think these Android bugs are related. This 1 is a WearOS bug. And this 2 is about line height and not ellipsis cut-off

[BeeMargarida]

@BeeMargarida Hi! Have you tried to launch this expo link on your device?

Yap, can only replicate the bug on my Xiaomi device

I don't think these Android bugs are related. This 1 is a WearOS bug. And this 2 is about line height and not ellipsis cut-off

Agree, but the root cause can be the same

[BeeMargarida]

Could replicate in emulator using default font - https://snack.expo.dev/@daisy112351/text-component-ellipsis-is-not-displayed-correctly?platform=android

Currently investigating if it's the Spannable usage that is causing this

[BeeMargarida]

Could replicate the issue on the Android side, still don't know if it's a RN issue or Android issue.

What's the cause? The SetSpanOperation responsible for setting the text size is the one causing the cut (setting the textSize in the TextView directly does not causes this).

Using the example provided in this issue, if we set the textSize in the TextView using the same value using in span, like setTextSize(TypedValue.COMPLEX_UNIT_PX, 83F), the problem ceases to exist. However, that's not a valid solution to apply since spannables can have different font sizes inside it. Trying to find a general solution for this problem as a workaround, although this seems to me like an Android issue.

[BeeMargarida]

I'll create a bug on Android side, since it's replicable with a simple setup (see zip attached), but will explore a workaround for RN.

Update: bug link

TestEllipsis.zip

[mleister97]

Any updates on this one?