How to Make Text Component Copyable in React Native

Copy and paste are two basic features available in our smartphones. Hence, users expect to have this feature on every app. If you have an app that has a lot of text then you might want to implement a copy-and-paste feature in your app too.

You should use the selectable prop of the Text component to make the text copyable. By default, selectable is set to false and you need to make selectable true to enable copy functionality. Still, have doubts? Go through the official documentation here.

Following is the complete react native example of a copyable text component in react native.

Function Component

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text} selectable>
        Please do long press to copy this text!!
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
  },
});

export default App;

Following is the output of react native copy text example.

That’s how you make the text selectable and copyable in react native. I hope this short react native tutorial will help you!