React-native: Text in FlatList is not selectable on Android

[maltoze]

React Native version: 0.60.5

System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 317.94 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.3.1 - /usr/local/opt/nvm/versions/node/v12.3.1/bin/node
    Yarn: 1.16.0 - ~/.yarn/bin/yarn
    npm: 6.9.0 - /usr/local/opt/nvm/versions/node/v12.3.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 28, 29
      Build Tools: 28.0.3, 29.0.1
      System Images: android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.5 => 0.60.5
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

export default class App extends React.Component {
  _renderItem = ({item}) => {
    return (
      <View>
        <Text selectable>{item}</Text>
      </View>
    )
  }

  _keyExtractor = (item, index) => index.toString();

  render() {
    return (
      <View style={styles.container}>
        <Text selectable>This is selectable Text...</Text>
        <FlatList
          data={['not selectable text', 'not selectable text']}
          renderItem={this._renderItem}
          keyExtractor={this._keyExtractor}
        />
      </View>
    );
  }
}

Describe what you expected to happen:

Need to be able to select Text in FlatList.

Snack, code example, screenshot, or link to a repository:

Snack: https://snack.expo.io/@maltoze/selectable-bug-in-flatlist

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[baldursson]

Also noticed this. I just upgraded my app from React Native 0.57.4 to 0.60.5 and now I can't select text on Android.

[chathuraSupun]

Text component rendered in FlatList is not selectable even if selectable={true} is specified.

[baldursson]

I curse the day I let React Native into my life

[tryvin]

Confirmed in 0.59.8 too, spent a good 30 minutes trying to figure out why this wasn't working on an Android 9.

[Kiryhas]

Can confirm, the Text component is selectable, but when rendered as a FlatList element, it is not selectable regardless of the 'selectable' prop.

[tryvin]

In my case I could remove the flat list, and use just a scroll view, but this isn't the ideal.

I even did a if for the platform.OS, ios uses flat list, Android uses scroll view

[ezranbayantemur]

I have this problem too. Text component can't selectable on FlatList..

[Ericky14]

Same problem here

[fenglu09]

Same problem in 0.59.10
In my case, add key={Math.random()} solved it

[kangsu-dev]

key={Math.random()} not works for me.(rn 0.61.2)
Instead, adding removeClippedSubviews={false} for Flatlist solved it.

[Rohansi]

Expo SDK 35.0.0 also has this problem. RN 0.59.8.

removeClippedSubviews={false} does work around it for me.

[khorark]

Added pointerEvents={'box-none'} for wrapper View solved this problem.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[Rohansi]

I'm on Expo SDK 37 now (RN 0.61.4). Still need removeClippedSubviews={false} to select text.

[fabriziobertoglio1987]

as displayed in the following Snack adding removeClippedSubviews={false} to the FlatList fixes the issue. @maltoze would you consider closing this issue? React-Native has currently 744 open issues. :smiley: :peace_symbol: Thanks Fabrizio

[Rohansi]

as displayed in the following Snack adding removeClippedSubviews={false} to the FlatList fixes the issue. @maltoze would you consider closing this issue? React-Native has currently 744 open issues. 😃 ☮️ Thanks Fabrizio

That's not a fix -- it's a workaround. It sacrifices FlatList performance to be able to select text.

[fabriziobertoglio1987]

https://github.com/facebook/react-native/blob/aee88b6843cea63d6aa0b5879ad6ef9da4701846/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactClippingViewGroup.java#L13-L23

Issue https://github.com/facebook/react-native/issues/23870 and pull request https://github.com/facebook/react-native/pull/26334 include many information on removeClippedSubviews.

[fabriziobertoglio1987]

SOLVED

I'm preparing a PR, applying the same solution from https://github.com/facebook/react-native/pull/28852 adding super.setTextIsSelectable(true); to ReactTextView

  @Override
  public void onAttachedToWindow() {
    super.onAttachedToWindow();
    if (mContainsImages && getText() instanceof Spanned) {
      Spanned text = (Spanned) getText();
      TextInlineImageSpan[] spans = text.getSpans(0, text.length(), TextInlineImageSpan.class);
      for (TextInlineImageSpan span : spans) {
        span.onAttachedToWindow();
      }
    }
    super.setTextIsSelectable(true);
  }

I am preparing the PR. Thanks :smiley:

I will need to verify for regression of functionalities included in https://github.com/facebook/react-native/commit/a0268a7bfc8000b5297d2b50f81e000d1f479c76

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[zoolyka]

Actually there is another workaround which does not require to disable removeClippedSubviews. Example:

export default class SelectableText extends React.Component {

  constructor ( props ) {

    super(props);

    this.state = {
      selectableFix: false
    };

    this.selectableFixTimeout = null;

  }

  shouldComponentUpdate ( nextProps, nextState ) {
    return(
      this.props.text !== nextProps.text ||
      this.state.selectableFix !== nextState.selectableFix
    );
  }

  componentDidMount () {
    this.selectableFixTimeout = setTimeout(() => {
      this.setState({
        selectableFix: true
      });
    }, 100);
  }

  componentWillUnmount () {
    clearTimeout(this.selectableFixTimeout);
  }

  render () {
    return(
      <Text
        selectable={this.state.selectableFix}
      >
        {this.props.text}
      </Text>
    );
  }

}