Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Text in FlatList is not selectable on Android

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Reactions:9
Comments:24 (2 by maintainers)

Top GitHub Comments

10reactions

Rohansicommented, Nov 30, 2019

Expo SDK 35.0.0 also has this problem. RN 0.59.8.

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

10reactions

baldurssoncommented, Sep 29, 2019

I curse the day I let React Native into my life

Top Results From Across the Web

react native - Text in FlatList is not selectable on Android

Expected behavior: Text in Flatlist should be selectable. Current behavior: Can't select the Text component even though set the selectable={true ...

FlatList - React Native

FlatList. A performant interface for rendering basic, flat lists, supporting the most handy features: Fully cross-platform.

How to use the FlatList Component — React Native Basics

What is the FlatList component? It's an easy way to make an efficient scrolling list of data. Not only is it efficient but...

Usage | FlashList

Switch from FlatList to FlashList and render the list once. You should see a warning about missing estimatedItemSize and a suggestion. Set this ......

React Native FlatList - Getting Your React Native Basics Right

You should know that extra data are optional props. And they are the non-compulsory properties available in the FlatList component for rendering ...