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

alexxxwork commented 1 year ago

Description

This is a duplicate report of this old bug https://github.com/facebook/react-native/issues/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

Screenshot_20230302_104027_testApp

Expo Go:

Screenshot_20230302_114853_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 commented 1 year ago

Recreated https://github.com/facebook/react-native/issues/36336 with a minimum code example and latest RN version