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 vincenzoddragon+five@gmail.com  From vincenzoddragon+five@gmail.com' } </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 vincenzoddragon+five@gmail.com  From vincenzoddragon+five@gmail.com' } </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

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.70.13. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[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