Get size of a View in React Native

ios react-native
Matthew picture Matthew · May 13, 2015 · Viewed 178.3k times · Source

Is it possible to get the size (width and height) of a certain view? For example, I have a view showing the progress:

<View ref='progressBar' style={{backgroundColor:'red',flex:this.state.progress}} />

I need to know the actual width of the view to align other views properly. Is this possible?

Answer

ide picture ide · May 13, 2015

As of React Native 0.4.2, View components have an onLayout prop. Pass in a function that takes an event object. The event's nativeEvent contains the view's layout.

<View onLayout={(event) => {
  var {x, y, width, height} = event.nativeEvent.layout;
}} />

The onLayout handler will also be invoked whenever the view is resized.

The main caveat is that the onLayout handler is first invoked one frame after your component has mounted, so you may want to hide your UI until you have computed your layout.

Related questions

How do you debug React Native?

How does one debug their React code with React Native while the app is running in app simulator?

Read More
react-native: command not found

I am getting -bash: react-native: command not found error while creating react-native project. Below are the additional info 1. brew --version homebrew 0.9.9 2 brew info watchman watchman `enter code here`stable 4.50 /usr/local/Cellar/watchman/4.4.0 3. brew info flow stable 0.24.1 /usr/local/Cellar/…

Read More
React Native Responsive Font Size

I would like to ask how react native handle or do the responsive font. For example in iphone 4s i Have fontSize: 14, while in iphone 6 I have fontSize: 18.

Read More