Enable click on View component is always useful for mobile developers in react native but in react native this cannot be possible before react native 0.55.2 version. We have to use Touchable opacity or other touchable component and wrap the View component as Child then we can set click event on View using Touchable Opacity. But from react native version 0.55.3 react native provides us a prop named as onStartShouldSetResponder={} which could enable onClick event on View component. Now there is no need to use additional Touchable component to make this happen. So in this tutorial we would React Native Set onPress onClick on View Component Android iOS Example Tutorial.
Contents in this project React Native Set onPress onClick on View Component Android iOS Example Tutorial:
1. Import Alert, Text, View and StyleSheet component in your react native project’s main App.js file.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Alert, Text, View, StyleSheet } from ‘react-native’;
|
2. Create our main Export default App class extends Component.
|
1
2
3
4
|
export default class App extends Component {
}
|
3. Creating render’s return block and here we would make our Root View component. Now we would make a Child View with onStartShouldSetResponder={} prop to enable clicking functionality.
- onStartShouldSetResponder={} : Setting up onPress event on View. We are printing a Alert message on Screen to see the effect.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() {
return (
<View style={styles.MainContainer}>
<View
style={styles.subView}
onStartShouldSetResponder={() => Alert.alert(‘View Clicked…’)}>
<Text style={styles.text}> Set onClick onPress Event on View Component </Text>
</View>
</View>
);
}
|
4. Creating 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’,
alignItems: ‘center’,
paddingTop: 25,
backgroundColor: ‘#FAFAFA’,
padding: 8,
},
subView: {
justifyContent: ‘center’,
padding: 20,
backgroundColor: ‘#33691E’,
width: 300,
height: 300
},
text: {
fontSize: 24,
color:‘#fff’,
fontWeight: ‘bold’,
textAlign: ‘center’,
},
});
|
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
import React, { Component } from ‘react’;
import { Alert, Text, View, StyleSheet } from ‘react-native’;
export default class App extends Component {
render() {
return (
<View style={styles.MainContainer}>
<View
style={styles.subView}
onStartShouldSetResponder={() => Alert.alert(‘View Clicked…’)}>
<Text style={styles.text}> Set onClick onPress Event on View Component </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
paddingTop: 25,
backgroundColor: ‘#FAFAFA’,
padding: 8,
},
subView: {
justifyContent: ‘center’,
padding: 20,
backgroundColor: ‘#33691E’,
width: 300,
height: 300
},
text: {
fontSize: 24,
color:‘#fff’,
fontWeight: ‘bold’,
textAlign: ‘center’,
},
});
|
Screenshot in Android device:
Screenshots in iOS device:
Also Read :
React Native Show Error Message if Image load failed Not Found on Server
React Native Change ListView Mode To GridView Dynamically on Button Click
React Native Fast Image Cache Package – Android iOS Example
React Native Generate Release key hash for Facebook Login in Windows
Create Simple Splash Screen in React Native Android iOS App Tutorial
