How to Make Text Component Copyable in React Native

Last Updated on December 14, 2020.

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 lot of text then you might want to implement a copy and paste feature in your app too.

You should use 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.

Class Component

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

export default class App extends Component {

  render() {
    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
  }
});

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.

react native text copy example

I hope this short react native tutorial will help you!

Leave a Reply

%d bloggers like this: