React Native Calculate View Dimensions dynamically on Button click

This tutorial explains how can we calculate view dimensions dynamically on button click in react native. This is sometime very important in order to make the user interface responsive with respect to different size of screen. In this example we are using ref attribute in order to get the dimension. Parent view is consist of ref props named as containerView and child view is consist of ref props named as innerView. we are going to calculate the dimensions ( X, Y, Width, Height ) of child view with respect to parent view's dimensions dynamically on button click with the help of measureLayout function.

React Native Calculate the Dimensions of Child View :

Lets follow the below steps to calculate view dimensions dynamically on button click in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import ReactNative, { AppRegistry, View, TouchableOpacity, findNodeHandle, Text, StyleSheet } from 'react-native';

Step 4: Lets create constructor block inside your App component.

constructor() {
    super();

    this.state = { x: null, y: null, width: null, height: null }
  }

Step 5: Lets create calculateDimensionsblock function inside the App component, which is used to calculate the dimensions of the child view. innerView is the reference of the child view and containerView is the reference of the parent view. The measureLayout function returns X position, Y position, Width, Height parameters as callback in case if successful.

  calculateDimensions = () => {
    this.refs.innerView.measureLayout(ReactNative.findNodeHandle(this.refs.containerView), (xPos, yPos, Width, Height) => {
      this.setState({ x: xPos, y: yPos, width: Width, height: Height });
    });
  }

Step 6: Implement render method inside the App class and wrapped the below layout design inside the root View component.

render() {
    return (
      <View ref="containerView" style={styles.container}>
        <View ref="innerView" style={styles.innerView}>
          <Text style={styles.text}>X: {this.state.x}</Text>
          <Text style={styles.text}>Y: {this.state.y}</Text>
          <Text style={styles.text}>Width: {this.state.width}</Text>
          <Text style={styles.text}>Height: {this.state.height}</Text>
        </View>

        <TouchableOpacity activeOpacity={0.8} style={styles.ButtonDesign} onPress={this.calculateDimensions}>
          <Text style={styles.text}>Calculate Blue Box's Dimensions</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Step 7 : Apply the below style sheet design.

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",

    },
    innerView: {
      backgroundColor: '#ff5722',
      width: '70%',
      height: '70%',
      marginBottom: 50,
      justifyContent: 'center',
      alignItems: 'center'
    },
    ButtonDesign: {
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      paddingHorizontal: 10,
      height: 50,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#0091ea',
    },
    text: {
      color: 'white',
      fontSize: 17
    },

  });

Complete Source Code for App.js 

Lets see the complete source code that helps to calculate view dimensions dynamically on button click in react native application.

import React, { Component } from 'react';
import ReactNative, { AppRegistry, View, TouchableOpacity, findNodeHandle, Text, StyleSheet } from 'react-native';


export default class App extends Component {

  constructor() {
    super();

    this.state = { x: null, y: null, width: null, height: null }
  }

  calculateDimensions = () => {
    this.refs.innerView.measureLayout(ReactNative.findNodeHandle(this.refs.containerView), (xPos, yPos, Width, Height) => {
      this.setState({ x: xPos, y: yPos, width: Width, height: Height });
    });
  }

  render() {
    return (
      <View ref="containerView" style={styles.container}>
        <View ref="innerView" style={styles.innerView}>
          <Text style={styles.text}>X: {this.state.x}</Text>
          <Text style={styles.text}>Y: {this.state.y}</Text>
          <Text style={styles.text}>Width: {this.state.width}</Text>
          <Text style={styles.text}>Height: {this.state.height}</Text>
        </View>

        <TouchableOpacity activeOpacity={0.8} style={styles.ButtonDesign} onPress={this.calculateDimensions}>
          <Text style={styles.text}>Calculate Blue Box's Dimensions</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",

    },
    innerView: {
      backgroundColor: '#ff5722',
      width: '70%',
      height: '70%',
      marginBottom: 50,
      justifyContent: 'center',
      alignItems: 'center'
    },
    ButtonDesign: {
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      paddingHorizontal: 10,
      height: 50,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#0091ea',
    },
    text: {
      color: 'white',
      fontSize: 17
    },

  });

Screenshot : 

This is all about React Native Calculate View Dimensions dynamically on Button click. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.