[Text component] Missing ellipsis when text contains line breaks (\n) [iOS only]

[DanielMarkiel]

trafficstars

Description

Hi, I noticed a potential bug which results in missing ellipsis on iOS when limiting lines on the Text component if passed text contains line breaks (\n). The text is being truncated properly to the set numberOfLines but it's missing the ... at the end (ellipsizeMode set to tail).

React Native Version

0.72.6

Output of npx react-native info

Bug reproducible at https://snack.expo.dev/QXsCyRwYN Expo 49.0

Steps to reproduce

1. Import React Native Text component
2. Use component e.g.

<Text numberOfLines={2} ellipsizeMode="tail">
  {text}
</Text>

4. Set text const as e.g.

const text = "Change code \n in the editor and \n watch it change on your phone!"

5. Run code on iOS *The text should contain at least the same number of line breaks (\n) as the set limit in the numberOfLines prop

Snack, screenshot, or link to a repository

https://snack.expo.dev/QXsCyRwYN

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.6. 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.

[DanielMarkiel]

The issue still exists in v0.72.6

[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

[OzymandiasTheGreat]

I can confirm that this is still an issue on react-native 0.73.4

[h01010]

this is still happens on react-native 0.73.5 😥

[tlmader]

Ran into this issue as well! Does anyone have a good workaround?

[m8tec]

+1

[flyaflya]

+1

[L-Weisz]

+1

[kingka]

+1

[sdepold]

+1

[wacci6]

+1

[salmabs]

+1

[jonathanseibt]

+1