React Native calculate child view X Y Dimensions dynamically on Button Click iOS Android Example

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.

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.

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.

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.

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.

6. Create a TouchableOpacity button. We would call the calculate_ChildView_Dimension() function on onPress event.

7. Crete Style for All components.

8. Complete source code for App.js File :

Screenshots in Android device :

calculate child view X Y Dimensions dynamically on Button ClickScreenshot in iOS device :

5 Comments

  1. Online Franz Tech

    Hello,
    Please how do run your app on Iphone, I#ve seen that you have a windows. Or do you have a MAC?

  2. Online Franz Tech

    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

    );
    }

Leave a Reply

Your email address will not be published.