Get Size of a View in React Native

How to get size of a component in react-native?

You can measure a view using the onLayout function mentioned here and here. To set it up, you need to call an onLayout function, which takes an event and returns an object, which contains the nativeEvent object. This object contains the x & y coordinates, as well as the width and height of the view.

I've set up an example project implementing the code here:

https://rnplay.org/apps/mbPdZw

Below is a simple setup that measures a view:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var SampleApp = React.createClass({

  getInitialState() {
        return {
            x: '',
            y: '',
            width: '',
            height: '',
            viewHeight: 100
        }
    },

  measureView(event) {
    console.log('event peroperties: ', event);
    this.setState({
            x: event.nativeEvent.layout.x,
            y: event.nativeEvent.layout.y,
            width: event.nativeEvent.layout.width,
            height: event.nativeEvent.layout.height
        })
    },

    changeHeight() {
        this.setState({
        viewHeight: 200
      })
    },

  render: function() {
    return (
      
        this.measureView(event)}  style={{height:this.state.viewHeight, marginTop:120, backgroundColor: 'orange'}}>
                The outer view of this text is being measured!
            x: {this.state.x}
            y: {this.state.y}
            width: {this.state.width}
            height: {this.state.height}
        

         this.changeHeight() }>
              Change height of container
        
      
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 28,
    textAlign: 'center',
    margin: 10,
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

How to get the size of chield view in react native?

As provided by the docs of View of react native :
https://facebook.github.io/react-native/docs/view

You can use onLayout event for getting the size of a view. For example:

    ...

If you want to get the size from subview to parent. Just simply pass your onLayout function to your child view. And use the below instead:

Parent class:

Child "B" class:

    ...

 {
  // event.nativeEvent.layout.width
  // event.nativeEvent.layout.height
}}>