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 :
Hello,
Please how do run your app on Iphone, I#ve seen that you have a windows. Or do you have a MAC?
I have both MAC and Windows system, to run apps on MAC read this tutorial: https://reactnativecode.com/install-react-native-on-mac/
Hello i have a question or a problem!
I would like to measure the height of a text
i try this not working :
constructor(props) {
super(props);
this.state = {
height: undefined,
}
}
componentDidMount() {
this.refs.Child_View.measureLayout(
ReactNative.findNodeHandle
(this.refs.Root_View), (X_Position, Y_Position, Width, Height) => {
this.setState({
height: Height
});
});
}
render() {
return (
Text
);
}
To calculate height you can use this component https://www.npmjs.com/package/react-native-measure-text
I’ve, tried it but itsn’t working!