How to select text for copy/paste in React Native? Code Example

Suppose we are creating a mobile application of famous quotes. Now users will want to copy those quotes and share with their friends. For that, you need to make the text selectable.

By default the text in React native apps are not selectable and that’s why we can’t long press to open contextual menu with copy & paste options.

Luckily, React Native provides selectable prop which when set to true, allows text to be selected.

Code Example

import React, { useState } from "react";
import { Text, StyleSheet, View } from "react-native";

const SelectableText = () => {
  
  return (
    <View style={styles.container}>
      <Text style={styles.baseText}>
        This text is not selectable
      </Text>
      <Text
       style={styles.baseText}
       selectable={true}
      >
        This text is selectable
      </Text>
    </View>

  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'space-between',
    height: 100,
    marginTop: 40
  },
  baseText: {
    fontFamily: "Cochin"
  },
  
});

export default SelectableText;

Output:

The above image shows how selectable text looks like in iOS (left) and Android (right) phones. The first text line is not selectable so nothing happened after long press in both phones. But second line is selectable and hence showing contextual menu with options according to phone types.

In the code we are setting selectable prop in line 13.

Live Demo

Conclusion

The conclusion is that you need to add selectable prop to the <Text> component and set it to true. This will allow text selection on both Android and iOS.