How to get element width in native reaction?

Question

How to get element width in native reaction like View? Since there is no percentage of use for width in the native reaction, how to get the width of an element or parent element?

Answer 1

You can trigger an event onLayoutto measure an element:

measureView(event) {
  console.log('event properties: ', event);
  console.log('width: ', event.nativeEvent.layout.width)
}

<View onLayout={(event) => this.measureView(event)}>

As for the width and height as a percentage, you can get the width and height of the window and use them as follows:

var {
   ...
   Dimensions
} = React

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

// 80% width
width: width * .8,

// 25% height
height: height / 4,