react native measure is undefined - scrollview

Question

I have a ScrollView in which there is several View lick so
<ScrollView>
<View
ref = {"view1"}
style = {{
height: 200,
backgroundColor: "#FF0000"
}}
>
<Text>{"text 1"}</Text>
</View>
<View
ref = {"view2"}
style = {{
height: 200,
backgroundColor: "#FF0000"
}}
>
<Text>{"text2"}</Text>
</View>
</ScrollView>
higher I have a 2 button when press start this code
// buttonPress is either "view1" || "view2"
this.refs[buttonPress].measure((fx, fy, width, height, px, py) => {
console.log("Fy", fy);
console.log("Py", py);
});
but I get en err saying that measure is undefined and indeed I can get the ref correctly I made sure of that but when I printed all the key inside the object here what come out :
11:38:28.404 I 'KEY', 'props'
11:38:28.404 I 'KEY', 'context'
11:38:28.404 I 'KEY', 'refs'
11:38:28.405 I 'KEY', 'updater'
11:38:28.405 I 'KEY', 'setWrappedInstance'
11:38:28.405 I 'KEY', 'resolveConnectedComponentStyle'
11:38:28.405 I 'KEY', 'state'
11:38:28.405 I 'KEY', '_reactInternalFiber'
11:38:28.405 I 'KEY', '_reactInternalInstance'
11:38:28.405 I 'KEY', '__reactInternalMemoizedUnmaskedChildContext'
11:38:28.405 I 'KEY', '__reactInternalMemoizedMaskedChildContext'
11:38:28.405 I 'KEY', '__reactInternalMemoizedMergedChildContext'
11:38:28.405 I 'KEY', '_root'
11:38:28.406 I 'KEY', 'wrappedInstance'
11:38:28.406 I 'KEY', 'isReactComponent'
11:38:28.406 I 'KEY', 'setState'
11:38:28.406 I 'KEY', 'forceUpdate'
as you can see measure is no were to be found (i know it is, not the best way of finding what is inside an object but it should a least be mentioned somewhere publicly for people to use, no?

Answer 1

You are not referencing your view properly. That's not how to pass ref prop to a view. Though there is a new API for doing that. The old way is using callback.
This is what your code should look like:
Import React, {createRef} from 'react';
import {ScrollView, View} from 'react-native';
const firstView = createRef(null);
const secondView = null
<ScrollView>
<View
ref = {firstView}
style = {{
height: 200,
backgroundColor: "#FF0000"
}}
>
<Text>{"text 1"}</Text>
</View>
<View
ref = {view => secondView = view}
style = {{
height: 200,
backgroundColor: "#FF0000"
}}
>
<Text>{"text2"}</Text>
</View>
Then later in your handles, you can access the two view using something like these:
// first view is using the new API
firstView.current.measure((x, y, width, height, pagex, pagey) => {
console.log('x coordiante: ', pagex);
console.log('y coordinate: ', pagey);
});
// secondView is using the old API
secondView.measure((x, y, width, height, pagex, pagey) => {
console.log('x coordiante: ', pagex);
console.log('y coordinate: ', pagey);
});