onLongPress={} event is like setOnLongClickListener() available in android application development. onLongPress={} activated the button after a few seconds of press, User need to press and hold the button for few seconds(1.3 seconds) approximate. But Button component in react native directly dose not support the onLongPress={} event, So instead of Button component we have to use TouchableOpacity component. So in this tutorial we would going to Add onLongPress on Button using TouchableOpacity in both Android iOS react native application example tutorial. Using this same method we can also implement onLongPress={} on Images.
Contents in this project Add onLongPress on Button using TouchableOpacity in Android iOS react native app example tutorial:
1. Import StyleSheet, View, Alert, TouchableOpacity and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Alert, TouchableOpacity, Text} from ‘react-native’;
|
2. Create a function named as SampleFunction(). We would call this function on onLongPress={} event.
|
1
2
3
4
5
|
SampleFunction=()=>{
Alert.alert(“On Long Press Activated on Button”)
}
|
3. Create a Root Parent View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
4. Create a TouchableOpacity component with Text component in root view and call the onLongPress={} event.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity onLongPress={this.SampleFunction} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> ON LONG PRESS THE BUTTON TO SEE THE EFFECT </Text>
</TouchableOpacity>
</View>
);
}
|
5. Create Style.
|
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
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
padding: 20,
alignItems: ‘center’
},
button: {
width: ‘100%’,
paddingTop:5,
paddingBottom:5,
backgroundColor: ‘#00BCD4’,
borderRadius:7,
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
6. 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Alert, TouchableOpacity, Text} from ‘react-native’;
export default class Mynewproject extends Component {
SampleFunction=()=>{
Alert.alert(“On Long Press Activated on Button”)
}
render() {
return (
<View style={styles.MainContainer}>
<TouchableOpacity onLongPress={this.SampleFunction} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> ON LONG PRESS THE BUTTON TO SEE THE EFFECT </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
padding: 20,
alignItems: ‘center’
},
button: {
width: ‘100%’,
paddingTop:5,
paddingBottom:5,
backgroundColor: ‘#00BCD4’,
borderRadius:7,
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
Screenshot in Android device :
Screenshots in iOS device :
Also Read :
Add Rounded Corner Borders to Text Input in React Native Android iOS
React Native Add Show Header Footer on FlatList in Android iOS Tutorial
React native Download Image from URL into Gallery folder Android iOS Example
React Native Show Live GIF Animated Image Inside Android iOS App
React Native Community Blur Background View Android iOS Example
