Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
pradeepmdk opened this issue Sep 30, 2023 · 9 comments · Fixed by fabOnReact/react-native-improved#3
Assignees
Labels

Comments

@pradeepmdk
Copy link

pradeepmdk commented Sep 30, 2023

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

Screenshot 2023-09-30 at 2 43 58 PM
@github-actions github-actions bot added Newer Patch Available Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Sep 30, 2023
@github-actions

This comment was marked as resolved.

@github-actions github-actions bot added Platform: Android Android applications. and removed Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Sep 30, 2023
@fabOnReact fabOnReact self-assigned this Dec 2, 2023
@fabOnReact
Copy link
Contributor

fabOnReact commented Jan 16, 2024

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

@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...  |
  1. 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
Copy link
Contributor

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

@realsoelynn
Copy link
Contributor

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
Copy link
Contributor

cipolleschi commented Nov 11, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment