react native change height dynamically code example

Example: getting view height dynamically in react native

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
    },

  });