PanResponder component is one of the most useful component in react native, PanResponder is used to recognize the touch on both android and iOS mobile phone screens and gives us many amazing features to detect events on screen. So in this tutorial we would going to Get Clicked Position of Touch Screen Coordinates using PanResponder in react native iOS Android app example tutorial. This tutorial is best help for beginners who wish to make mobile gaming applications in react native because without detecting the motion on screen there is no game works properly. So let’s get started .
Contents in this project Get Clicked Position of Touch Screen Coordinates using PanResponder in iOS Android React Native App Tutorial:
1. Import StyleSheet, View, Platform, Text and PanResponder component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Platform, Text, PanResponder } from ‘react-native’;
|
2. Create constructor() in your project and make 2 State named as locationX and locationY. We would also make a this.panResponder variable to use the PanResponder data.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
constructor()
{
super();
this.panResponder;
this.state = {
locationX: 0,
locationY: 0
}
}
|
3. Create componentWillMount() inbuilt function in your class and make the PanResponder inbuilt all events inside it with our created this.panResponder variable.
onPanResponderRelease : Inside this function we would update the locationX and locationY State value according to retrieved screen dimensions value on touch event.
|
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
|
componentWillMount()
{
this.panResponder = PanResponder.create(
{
onStartShouldSetPanResponder: (event, gestureState) => true,
onStartShouldSetPanResponderCapture: (event, gestureState) => true,
onMoveShouldSetPanResponder: (event, gestureState) => false,
onMoveShouldSetPanResponderCapture: (event, gestureState) => false,
onPanResponderGrant: (event, gestureState) => false,
onPanResponderMove: (event, gestureState) => false,
onPanResponderRelease: (event, gestureState) =>
{
this.setState({
locationX: event.nativeEvent.locationX.toFixed(2),
locationY: event.nativeEvent.locationY.toFixed(2)
});
}
});
}
|
4. Create a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
|
render()
{
return(
<View style = { styles.MainContainer }>
</View>
);
}
|
5. Create a sub view inside root view, This view is used to show the Current Coordinates value above the Screen using Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
render()
{
return(
<View style = { styles.MainContainer }>
<View>
<Text style = { styles.text }>X: { this.state.locationX }, Y: { this.state.locationY }</Text>
</View>
</View>
);
}
|
6. Create another Child View , This view is the Touchable View and we would calculate the X and Y coordinates from this part of screen.
|
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
|
render()
{
return(
<View style = { styles.MainContainer }>
<View>
<Text style = { styles.text }>X: { this.state.locationX }, Y: { this.state.locationY }</Text>
</View>
<View style = { styles.childView }>
<View style = {[ styles.point, { top: parseFloat( this.state.locationY – 15 ), left: parseFloat( this.state.locationX – 15 )}]} />
<View style = {{ flex: 1, backgroundColor: ‘transparent’ }} { ...this.panResponder.panHandlers } />
</View>
</View>
);
}
|
7. 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
27
28
29
30
31
32
33
34
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
},
childView:
{
flex: 1,
backgroundColor: ‘#263238’,
overflow: ‘hidden’
},
text:
{
fontSize: 22,
fontWeight: ‘bold’,
color: ‘#fff’,
textAlign: ‘center’,
padding: 8,
backgroundColor: ‘#607D8B’,
},
point:
{
height: 27,
width: 27,
position: ‘absolute’,
borderRadius: 15,
backgroundColor: ‘#FF3D00’
}
});
|
8. 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Platform, Text, PanResponder } from ‘react-native’;
export default class Project extends Component<{}>
{
constructor()
{
super();
this.panResponder;
this.state = {
locationX: 0,
locationY: 0
}
}
componentWillMount()
{
this.panResponder = PanResponder.create(
{
onStartShouldSetPanResponder: (event, gestureState) => true,
onStartShouldSetPanResponderCapture: (event, gestureState) => true,
onMoveShouldSetPanResponder: (event, gestureState) => false,
onMoveShouldSetPanResponderCapture: (event, gestureState) => false,
onPanResponderGrant: (event, gestureState) => false,
onPanResponderMove: (event, gestureState) => false,
onPanResponderRelease: (event, gestureState) =>
{
this.setState({
locationX: event.nativeEvent.locationX.toFixed(2),
locationY: event.nativeEvent.locationY.toFixed(2)
});
}
});
}
render()
{
return(
<View style = { styles.MainContainer }>
<View>
<Text style = { styles.text }>X: { this.state.locationX }, Y: { this.state.locationY }</Text>
</View>
<View style = { styles.childView }>
<View style = {[ styles.point, { top: parseFloat( this.state.locationY – 15 ), left: parseFloat( this.state.locationX – 15 )}]} />
<View style = {{ flex: 1, backgroundColor: ‘transparent’ }} { ...this.panResponder.panHandlers } />
</View>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
},
childView:
{
flex: 1,
backgroundColor: ‘#263238’,
overflow: ‘hidden’
},
text:
{
fontSize: 22,
fontWeight: ‘bold’,
color: ‘#fff’,
textAlign: ‘center’,
padding: 8,
backgroundColor: ‘#607D8B’,
},
point:
{
height: 27,
width: 27,
position: ‘absolute’,
borderRadius: 15,
backgroundColor: ‘#FF3D00’
}
});
|
Screenshots:
Also Read :
React Native Create Custom Countdown Timer for Android iOS Tutorial
React Native Change TextInput PlaceHolder Text Color iOS Android
Remote Debugger is in a Background Tab which may cause apps to perform Slowly React Native
React Native Disable Hide ScrollBar ScrollIndicator in ScrollView
React Native Call Load Different CSS Style on View Component
