React Native gives us a function named as measureLayout() which works with ReactNative.findNodeHandle() event. This function would allow us the calculate the Child View X-Position, Y-Position, Width and Height. The X-Position and Y-Position is in the respect of Root Parent View. Using this tutorial developers can find the position of View component on screen. So in this tutorial we would going to create a react native app to calculate child view X Y Dimensions dynamically on Button Click iOS Android Example tutorial.
Contents in this project Calculate Child View X Y Dimensions dynamically on Button Click in React Native iOS Android Example :
1. Import View, StyleSheet, Text, findNodeHandle, TouchableOpacity and Platform component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import ReactNative, { View, StyleSheet, Text, findNodeHandle, TouchableOpacity, Platform } from ‘react-native’;
|
2. Create constructor() in your class. Inside the constructor() make 4 states named as X_Dimension, Y_Dimension, Child_View_Width, and Child_View_Height. Each state is used to hold a specific value.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
constructor()
{
super();
this.state = {
X_Dimension: ”,
Y_Dimension: ”,
Child_View_Width: ”,
Child_View_Height: ”
}
}
|
3. Create a function named as calculate_ChildView_Dimension(). Inside this function we would find the Child View X-Dimension, Y-Dimension, Height and Width and store that height width into State. We are pointing the Root view and Child view using unique reference prop. This prop would give a unique signature to View like a ID.
this.refs.Child_View : Represents the Child View reference.
this.refs.Root_View : Represents the Root View reference.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
calculate_ChildView_Dimension =()=>
{
this.refs.Child_View.measureLayout(
ReactNative.findNodeHandle
(this.refs.Root_View), ( X_Position, Y_Position, Width, Height ) =>
{
this.setState({
X_Dimension : X_Position,
Y_Dimension: Y_Position,
Child_View_Height: Width,
Child_View_Width: Height
});
});
}
|
4. Create a Root View in render’s return block and define the reference using ref=”” prop. This ref is used in above function as unique signature.
|
1
2
3
4
5
6
7
8
9
10
11
|
render()
{
return(
<View ref = “Root_View” style = { styles.MainContainer }>
</View>
);
}
|
5. Create a Child View in Root View and define reference using ref=”” prop like we did in Root View. After that we would print All the 4 Values on Screen using text component with States.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
render()
{
return(
<View ref = “Root_View” style = { styles.MainContainer }>
<View ref = “Child_View” style = { styles.ChildView }>
<Text style={styles.TextStyle}> X = {this.state.X_Dimension} </Text>
<Text style={styles.TextStyle}> Y = {this.state.Y_Dimension} </Text>
<Text style={styles.TextStyle}> Height = {this.state.Child_View_Height} </Text>
<Text style={styles.TextStyle}> Width = {this.state.Child_View_Width} </Text>
</View>
</View>
);
|
6. Create a TouchableOpacity button. We would call the calculate_ChildView_Dimension() function on onPress 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
|
render()
{
return(
<View ref = “Root_View” style = { styles.MainContainer }>
<View ref = “Child_View” style = { styles.ChildView }>
<Text style={styles.TextStyle}> X = {this.state.X_Dimension} </Text>
<Text style={styles.TextStyle}> Y = {this.state.Y_Dimension} </Text>
<Text style={styles.TextStyle}> Height = {this.state.Child_View_Height} </Text>
<Text style={styles.TextStyle}> Width = {this.state.Child_View_Width} </Text>
</View>
<TouchableOpacity
style={styles.TouchableOpacityStyle}
activeOpacity = { .6 }
onPress={ this.calculate_ChildView_Dimension }
>
<Text style={styles.TextStyle}> Calculate Child View Dimensions </Text>
</TouchableOpacity>
</View>
);
}
|
7. Crete Style for All components.
|
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
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#ECEFF1’,
marginTop: (Platform.OS === ‘ios’) ? 20 : 0
},
ChildView:
{
width: 200,
height: 200,
backgroundColor: ‘#00BCD4’,
justifyContent: ‘center’,
},
TouchableOpacityStyle: {
marginTop:30,
marginLeft:10,
marginRight:10,
paddingTop:15,
paddingBottom:15,
borderWidth: 1,
borderColor: ‘#fff’,
backgroundColor:‘#004D40’,
borderRadius:7,
width: ‘90%’
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
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
111
|
import React, { Component } from ‘react’;
import ReactNative, { View, StyleSheet, Text, findNodeHandle, TouchableOpacity, Platform } from ‘react-native’;
export default class MyProject extends Component<{}>
{
constructor()
{
super();
this.state = {
X_Dimension: ”,
Y_Dimension: ”,
Child_View_Width: ”,
Child_View_Height: ”
}
}
calculate_ChildView_Dimension =()=>
{
this.refs.Child_View.measureLayout(
ReactNative.findNodeHandle
(this.refs.Root_View), ( X_Position, Y_Position, Width, Height ) =>
{
this.setState({
X_Dimension : X_Position,
Y_Dimension: Y_Position,
Child_View_Height: Width,
Child_View_Width: Height
});
});
}
render()
{
return(
<View ref = “Root_View” style = { styles.MainContainer }>
<View ref = “Child_View” style = { styles.ChildView }>
<Text style={styles.TextStyle}> X = {this.state.X_Dimension} </Text>
<Text style={styles.TextStyle}> Y = {this.state.Y_Dimension} </Text>
<Text style={styles.TextStyle}> Height = {this.state.Child_View_Height} </Text>
<Text style={styles.TextStyle}> Width = {this.state.Child_View_Width} </Text>
</View>
<TouchableOpacity
style={styles.TouchableOpacityStyle}
activeOpacity = { .6 }
onPress={ this.calculate_ChildView_Dimension }
>
<Text style={styles.TextStyle}> Calculate Child View Dimensions </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#ECEFF1’,
marginTop: (Platform.OS === ‘ios’) ? 20 : 0
},
ChildView:
{
width: 200,
height: 200,
backgroundColor: ‘#00BCD4’,
justifyContent: ‘center’,
},
TouchableOpacityStyle: {
marginTop:30,
marginLeft:10,
marginRight:10,
paddingTop:15,
paddingBottom:15,
borderWidth: 1,
borderColor: ‘#fff’,
backgroundColor:‘#004D40’,
borderRadius:7,
width: ‘90%’
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
Screenshots in Android device :
Screenshot in iOS device :
Also Read :
Embed YouTube Video in React Native Android iOS App Using WebView
Add Show Image Icon Inside Button in React Native Application
React Native Solve unable to resolve module AccessibilityInfo Error in New Project
React Native Create Disabled Button State Using TouchableOpacity
React Native Getting Started With React Navigation 3.x Tutorial to Add Activity
