[Text on Android]: setting selectable to true breaks the text truncation and lineHeight on Android

[dariakoko]

Description

I use Text component that has to contain selectable text and should be truncated if it extends the width of the parent component. On iOS everything works fine. On Android if I set selectable={true} truncation and line height of the text are breaking.

Steps to reproduce

1. import Text component from react-native
2. render Text component, add selectable={true}, numberOfLines={1}
3. the text is cut off instead of being truncated, the line height is bigger than it should be, the top of the second line of text is visible

React Native Version

0.75.4

Affected Platforms

Runtime - Android

Output of npx react-native info

-

Stacktrace or Logs

-

Reproducer

https://github.com/dariakoko/text-component-on-android

Screenshots and Videos

      <View style={{width: 200}}>
        <Text style={{color: 'green'}}>default: </Text>
        <Text style={{backgroundColor: 'yellow'}}>
          Some long very very very very very long text
        </Text>

        <Text>-------------</Text>

        <Text style={{color: 'green'}}>not selectable: </Text>
        <Text numberOfLines={1} style={{backgroundColor: 'yellow'}}>
          Some long very very very very very long text
        </Text>

        <Text>-------------</Text>

        <Text style={{color: 'red'}}>selectable (issue): </Text>
        <Text
          selectable={true}
          numberOfLines={1}
          style={{backgroundColor: 'yellow'}}>
          Some long very very very very very long text
        </Text>
        <View style={{height: 20, backgroundColor: 'pink'}}></View>
      </View>

[spyshower]

what happens if you render something extra below the text? in your example, that would be below the red text (the actual text, not the label)

[dariakoko]

@spyshower like this? Nothing changes

        <Text style={{color: 'red'}}>selectable (issue): </Text>
        <Text selectable={true} numberOfLines={1}>
          Some long very very very very very long text
        </Text>
        <View style={{height: 20, backgroundColor: 'pink'}}></View>

[dariakoko]

Set the background color for the text, as you can see it's the actual text component that gets all weird

        <Text
          selectable={true}
          numberOfLines={1}
          style={{backgroundColor: 'yellow'}}>
          Some long very very very very very long text
        </Text>

[dariakoko]

Feels like the numberOfLines prop is not being handled correctly if selectable is set to true

[spyshower]

I am not able to check your code in android atm, any chance you played with ellipsizeMode? on the docs it says:

On Android, when numberOfLines is set to a value higher than 1, only tail value will work correctly.

as a nasty workout, I believe you will be able to get it to work if you specify a height to the parent controler.

i will try to reproduce it later

[dariakoko]

Thanks! It's too nasty tho 😄 and the missing truncation won't be solved by specify the height

[spyshower]

Thanks! It's too nasty tho 😄 and the missing truncation won't be solved by specify the height

True I guess...

[princektripathi]

@dariakoko, I validated the repro and it seems to be working fine. Am I missing something?

https://github.com/user-attachments/assets/bce881bb-4aa2-415a-bd95-7ce35929ac7c

[spyshower]

@dariakoko, I validated the repro and it seems to be working fine. Am I missing something? Screen.Recording.2025-01-27.at.7.51.17.PM.mov

can you share the code too? :)

[yogeshpaliyal]

I Guess, I found the Issue whenever we set the numberOfLines as 1, we have to set setSingleLine(true) on the native TextView (this is currently not happening), I tried by adding the setSingleLine and setting the value as true, it is working as expected.

1. numberOfLines : 1
2. selectable : true
3. singleLine : true (set from android native hardcoded)

But there is still a issue, if we set the numberOfLines to more than 1, then ellipsizeMode and selectable not working together.

1. numberOfLines : 2
2. selectable : true
3. singleLine : false (set from android native hardcoded)

[dariakoko]

@princektripathi hi! I still see the issue on the screenshot you provided - the text inside of the third yellow component is not truncated and cut out instead, am expecting three dots in the end of the line.

@yogeshpaliyal thank you for looking into it too! I am not that familiar with the native code, but from what you described it looks like this would be the solution. The only minor issue I see from the screenshot you provided is the extra space before the three dots

[yogeshpaliyal]

@dariakoko is the spacing issue is in 1st screenshot or 2nd one?

[dariakoko]

@yogeshpaliyal first

[yogeshpaliyal]

@yogeshpaliyal first

I see this is same as above one only, not able to see the difference, might have to check by adding grids.

[dariakoko]

The spacing issue is not really the first priority ellipsizeMode not working correctly together with selectable is

I think we can see that extra space "very ..." instead of "very..." because there really is the empty space in the string and it doesn't get trimmed when applying the ellipsizeMode

[grkemtneri]

same issue did you find solution ? @dariakoko

[dariakoko]

Not yet, unfortunately @grkemtneri

[Grantismo]

+1 we are also experiencing this issue

[roman-zaitsev]

+1 the same issue

[kristian-nst]

+1 here. Workaround is to disable selectable if numberOfLines is provided and on Android

[jisunipark]

+1 same issue