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

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 9
Comments: 24 (6 by maintainers)

Commits related to this issue

Fix non selectable Text in FlatList (#28952) Summary: This issue fixes https://github.com/facebook/react-native/issues/26264 fixes https://github.com/facebook/react-native/issues/27107 Text is not se... — committed to facebook/react-native by fabOnReact 3 years ago

Most upvoted comments

Expo SDK 35.0.0 also has this problem. RN 0.59.8.

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

+10

Rohansi on Nov 30, 2019

I curse the day I let React Native into my life

+10

baldursson on Sep 29, 2019

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

kangsu-dev on Nov 27, 2019

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

khorark on Dec 9, 2019

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.

Rohansi on May 19, 2020

This issue should not been closed. My pr https://github.com/facebook/react-native/pull/28952 was written to fix this issue, I can improve the pr but please don’t close the issue.

fabOnReact on Feb 25, 2021

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>
    );
  }

}

zoolyka on Sep 15, 2020

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.

stale[bot] on Aug 29, 2020

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

fenglu09 on Nov 22, 2019