react native measure is undefined

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);
});