Using onLayout

In our preceding example, we don't need to specify the height of the DatePickerIOS component when expanded. However, there may be scenarios in which you may need to manually get the dimensions of a component.

To calculate a component's height, we can utilize its onLayout property to fire a callback and then use that callback to save properties passed to the callback. The onLayout property is an event that is invoked on mount and layout changes, giving the event object a nativeEvent object that nests the component's layout properties. Using DatePickerIOS as an example, you can pass a callback to its onLayout prop like this:

<DatePickerIOS 
  date={ this.state.date } 
  onDateChange={ (date) => this._onDateChange(date) } 
  onLayout={ (event) => this._getComponentDimensions(event) } 
  style={ styles.datePicker }  
/> 

 

The event from onLayout gives access to the following property:

event: { 
  nativeEvent: { 
    layout: { 
      x: //some number 
      y: //some number...