Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Measure and Get the Position of a React Native Element

2:14 React lesson by

In this lesson we'll explore how to measure the dimensions and get the position of a React Native element using onLayout and UIManager.measure. Additionally we'll see how to use the helper function measure on the component ref for easier measurement.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson we'll explore how to measure the dimensions and get the position of a React Native element using onLayout and UIManager.measure. Additionally we'll see how to use the helper function measure on the component ref for easier measurement.

We'll start by putting UIManager and findNodeHandle from react-native. Let's take a quick look at our application. We have a View that we want to measure. We have a button to trigger our measure, and we have some output on the screen of the View measurements that we take.

The first method of measuring a View is using the property onLayout. It's a function that passes in an event with a nativeEvent, we'll de-structure that. We then call this.setState. We'll set our measurement to nativeEvent.layout.

NativeEvent.layout will contain Width, Height, X, and Y. This function will be called each time the layout is rendered. If we refresh, we can now see that our measurements are coming through.

Now, we'll add a ref to our View that we want to measure. We say "ref," we give a callback ref, and sign this.view = ref. Now, we'll give our TouchableOpacity the onPress property. Then, call a function called this.measure.

We go create the measure function. Then, we'll use UIManager which has a measure function, which takes a node handle. We'll need findNodeHandle. I'll pass in our ref, this.view. Then, it synchronously measures the View. We'll then pass in a callback and say this.setState, measurements, which is our object.

Each argument is passed in separately. Our X, our Y, our Width, and our Height. We'll put that here, X, Y, Width, and Height. When I save this and refresh and then tap here, you can see that our X changed just a little bit.

If we don't want to import UIManager, you can also use the help method on the reference. We say this.view.measure. We no longer need our NodeHandle.

We'll then pass in our callback. If we refresh, and you can see that we also then had our x changed a little bit...



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?