Text in FlatList is not selectable on Android

user_8510691 0
Viewed 1311

I just upgraded my app from React Native 0.58.5 to 0.61.2 and now I can't select text in FlatList on Android.

I tried to set the selectable = {true} in the Text component in React Native 58.5, and it worked well and could copy the content in the Text. But after upgraded the React Native version from 0.58.5 to 0.61.2, and couldn't select the text for copy/paste the content in Android 9.0. Actually it worked on Android 5.0, but didn't work on Android 9.0

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

Expected behavior: Text in Flatlist should be selectable.

Current behavior: Can't select the Text component even though set the selectable={true} in Android 9.0

react-native
2 Answers

You should enclose this into touchableopacity.. 

<TouchableOpacity style={{ flex: 1 }} 
     onPress={() =>}}>     
        <View>
         <Text selectable>{item}</Text>
        </View>
   </TouchableOpacity>
user_44000710

I solved this by adding a key prop to the Text component:

<Text selectable={true} key={Math.random()}>
   {text}
</Text>

EDIT: The solution above does not seem to work on all RN versions, an alternative solution is setting removeClippedSubviews={false} on the FlatList

user_12063880
Related