How to touch and hold to select text in React Native?

Nov 14, 2022 . Admin

This article will provide an example of how to make text components copyable in react native. it's a simple example of how to select and copy from the rich text in react native. it's a simple example of react native copy text to clipboard example. this example will help you learn how to touch and hold to select text in react native. You need to some steps to do how to make text clickable in react native.

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.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: App.js

In this step, You will open the App.js file and put the code.

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

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

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

export default App;
Step 3: Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...

#React Native