Hello friends, Our today’s tutorial is so simple but most usable for react native developers. As a part of react native copy and paste text is so much used by users. If your application is text based like Article based, Jokes based then copying that text is so much helpful for app users. Because this is how they can easily copy the article and save it anywhere in their phone. In react native we can make the Text component text Copyable using selectable={true} prop. This prop allows the Text to selectable by user. So in this tutorial we would learn about React Native Enable Touch and Hold to Select Copy Text.
Contents in this project React Native Enable Touch and Hold to Select Copy Text :-
1. Open your project’s main App.js file and import StyleSheet, Text and SafeAreaView component.
|
1
2
3
|
import React from ‘react’;
import { StyleSheet, Text, SafeAreaView } from ‘react-native’;
|
2. Creating our main App functional component.
|
1
2
3
4
5
|
export default function App() {
}
|
3. Creating a Text component with selectable={true} prop to enable touch and hold to copy and select.
|
1
2
3
|
<Text style={styleSheet.text} selectable={true} >
Make Text selectable Using Touch and Hold in React Native
</Text>
|
4. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
text: {
fontSize: 25,
textAlign: ‘center’,
color: ‘black’
}
});
|
5. Complete Source Code for App.js file :-
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
import React from ‘react’;
import { StyleSheet, Text, SafeAreaView } from ‘react-native’;
export default function App() {
return (
<SafeAreaView style={styleSheet.MainContainer}>
<Text style={styleSheet.text} selectable={true} >
Make Text selectable Using Touch and Hold in React Native
</Text>
</SafeAreaView>
);
}
const styleSheet = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
},
text: {
fontSize: 25,
textAlign: ‘center’,
color: ‘black’
}
});
|
Screenshot :-
Also Read :
RNCSafeAreaView was not found in the UIManager React Native iOS Error Solution
Dynamically Add Values in String Array List in React Native on button click
React Native Check Value Is Number Or Not Using isNaN() Validation
React Native Screen Overlay ActivityIndicator Progress Bar Example Tutorial
React Native Create Custom Component with custom user define Props
