Text is cut with ellipsis when containing certain characters if numberOfLines={1} and inside a View set to row (Android only)

[M-i-k-e-l]

Description

A Text with the following attributes will be cut off with ellipsis

1. Android device (Pixel 5 API 31 in my case)
2. numberOfLines={1}
3. Inside a View set to row (see example below)
4. Specific characters in the text (I've seen slash and backslash, not sure if others exist)
5. Only some lengths of text have this bug (see example below).

Version

0.70.6

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 12.6.1
CPU: (10) arm64 Apple M1 Pro
Memory: 311.75 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
Yarn: Not Found
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
Watchman: 2022.11.14.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
Android SDK:
API Levels: 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33
Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0, 33.0.0
System Images: android-31 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
Languages:
Java: 11.0.16.1 - /opt/homebrew/opt/openjdk@11/libexec/openjdk.jdk/Contents/Home/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.6 => 0.70.6
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1. Fresh install a project with npx react-native init <projectName>
2. Change your App.js with the example bellow.
3. Install on Android.

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

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import type {Node} from 'react';
import {SafeAreaView, Text, useColorScheme, View} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const example = text => {
    return (
      <View style={{flexDirection: 'row'}}>
        <Text numberOfLines={1}>{text}</Text>
      </View>
    );
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      {example('abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz')}
      {example('abcde/fghijklmnopqrstuvwxyzabcdefghijklmnopqrst')}
      {example('abcde/fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz')}
      {example('abcde/fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz01234')}
      {example('abcde/fghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789')}
    </SafeAreaView>
  );
};

export default App;

You can see that only a certain length of text has this issue:

[M-i-k-e-l]

A possible workaround is to use the unicode characters \u2215 for slash and \u005c for backslash, but it's not very scalable

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[arushikesarwani94]

Fixed by #37667