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

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

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.

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

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

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… |

@yungsters

@yungsters

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

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...  |

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

@yungsters

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

@fabOnReact

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

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

Navigation Menu

Repository navigation

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

Description

React Native Version

Output of `npx react-native info`

Steps to reproduce

Snack, screenshot, or link to a repository

react-native-improved

Set-up

npm

yarn v1

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Description

React Native Version

Output of npx react-native info

Steps to reproduce

Snack, screenshot, or link to a repository

Activity

github-actions commented on Sep 30, 2023

fabOnReact commented on Jan 16, 2024

fabOnReact commented on Jan 18, 2024

fabOnReact commented on Feb 4, 2024

react-native-improved

Set-up

npm

yarn v1

yungsters commented on Mar 12, 2024

fabOnReact commented on May 15, 2024

fabOnReact commented on Jul 25, 2024

realsoelynn commented on Aug 9, 2024

cipolleschi commented on Nov 11, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx react-native info`