numberOfLines={1} and alignSelf: 'flex-start' when we set this text is break middle of in Android

[pradeepmdk]

Description

when we use this

<Pressable onPress={() => {
                    console.log("SDfsdfsdf +" + Math.random())
                }} style={{  alignSelf: 'flex-start' }}>
                    <View style={{   }}>
                        <Text 
                        numberOfLines={1} 
                        style={{  }}  onTextLayout={onTextLayout}>{'From [email protected]  From [email protected]' } </Text>
                    
                    </View>
                </Pressable>

this not taking a full row. but when we set flex 1 it will take. but if the text is small when i click empty space pressable is triggering.

React Native Version

0.70.13

Output of npx react-native info

System:
OS: macOS 14.0
CPU: (8) arm64 Apple M1
Memory: 1.19 GB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
Watchman: 2023.08.28.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.13.0 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 15.0/15A240d - /usr/bin/xcodebuild
Languages:
Java: 11.0.17 - /Users/pradeepkumar/.jenv/shims/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

<Pressable onPress={() => {
                    console.log("SDfsdfsdf +" + Math.random())
                }} style={{  alignSelf: 'flex-start' }}>
                    <View style={{   }}>
                        <Text 
                        numberOfLines={1} 
                        style={{  }}  onTextLayout={onTextLayout}>{'From [email protected]  From [email protected]' } </Text>
                    
                    </View>
                </Pressable>

if you want you can increase the letterspacing also we will able to reproduce even small text.

Snack, screenshot, or link to a repository

https://snack.expo.dev/@pradeepero/text-wrap-issue-on-android?platform=android

[fabOnReact]

I created the TextImproved component which extends and patches react-native Text.

you can install it with yarn add react-native-improved

More info in the readme of https://github.com/fabriziobertoglio1987/react-native-improved (you need to copy the postinstall in your package.json).

It does not require building react-native from source.

[fabOnReact]

Hello,

Thanks for the issue. I have been contributing to facebook/react-native for 4 years and specialize in the Text/TextInput components. I currently have 58 facebook/react-native PRs:

https://github.com/facebook/react-native/pulls?q=is%3Apr+author%3Afabriziobertoglio1987+

It is the suggested approach from the react-native core team (see this discussion).

I'm publishing several fixes for Text and TextInput component in a separate library react-native-improved.

• The Component is based on ReactTextView, it is the same implementation from react-native.
• It will include several bug fixes.
• You can use the library until the PR is merged and released with react-native.
• You can use side by side both components from react-native and react-native-improved, depending on where you need the fix.
• I will also publish the PR to facebook/react-native (daily fixes and releases).

The advantages would be:

• Increased engagement with the community, issues are quickly fixed.
• No limitations when merging PRs (react-native main branch is used on facebook marketplace).
• Only Meta employees can merge and review facebook/react-native PRs.
• Allows us to further experiment and develop react-native.

Do you want me to publish for you a patched release? I'm working on a list of priorities. Thanks

[fabOnReact]

This PR is included in the react-native-improved library:

react-native-improved

• Supports ONLY react-native 0.73.
• Supports only old architechture (new architechture is WIP)

Set-up

In package.json

 "scripts": {
+  "postinstall": "yarn run react-native-patch"
 }

Then

npm

npm install react-native-improved --save-dev

yarn v1

yarn add react-native-improved --dev

[yungsters]

Is there something about a single line of truncated text that behaves differently from multiple lines of truncated text? Wouldn't we want this same logic to be accounted for in both scenarios?

For example, wouldn't we want to handle Case 1 and Case 3 in the example below?

# Case 1: Single Line
| Lorem ipsum dolor sit amet… |

# Case 2: Multiple Lines (Short Truncated Line)
| Lorem ipsum dolor sit amet, |
| consectetur adipiscing...   |

# Case 3: Multiple Lines (Long Truncated Line)
| Lorem ipsum dolor sit    |
| ametfoobar, consectetur… |

[fabOnReact]

@yungsters

A possible solution would be to introduce the option none to the android prop textBreakStrategy. The option already exist for iOS (lineBreakStrategyIOS).

1. An example for single line text (PR Fix single line text not fully rendered #41770):

# Case 1: Single Line textBreakStrategy="simple"
| Lorem ipsum dolor sit amet… |

# Case 1: Single Line textBreakStrategy="none" (respects yoga layout width)
| Lorem ipsum dolor sit amet, consectetur adipiscing...  |

2. An example for multiline text with an implementation similar to PR Fix single line text not fully rendered #41770.

# Case 1: Single Line textBreakStrategy="simple"
| Lorem ipsum dolor sit amet… |

# Case 1: Single Line textBreakStrategy="none" (respects yoga layout width)
| Lorem ipsum dolor sit amet, consectetur adipiscing...  |

# Case 2: Multiple Lines (Short Truncated Line) textBreakStrategy="simple"
| Lorem ipsum dolor sit amet, |
| consectetur adipiscing...   |

# Case 2: Multiple Lines (Short Truncated Line) textBreakStrategy="none"  (respects yoga layout width)
| Lorem ipsum dolor sit amet, consectetur adipiscing esqu |
| Quisque vitae ex ut velit dapibus pellentesque.  esqu...|

Should I start working on this? Thanks

[fabOnReact]

@yungsters how can I help moving this PR forward? Thanks a lot.

[realsoelynn]

TL;DR Expenxify Expensify/App#43068 mentioned it is no longer reproducible. @fabOnReact will try to reproduce by following instructions on the PR.

@fabOnReact Let's continue the discussion on the PR #41770

[cipolleschi]

If we are moving the discussion to #41770, can we close this PR?