React Native FlatList Item onLayout always return y: 0, x: 0

Question

I would like know the value y in every item in a FlatList, however, it always to return 0, is any code wrong? (ScrollView returns the correct value)

function getLayout(event, id) { 
    const { y } = event.nativeEvent.layout;
    console.log("y: " + y + "| id: " + id);
    console.log(event.nativeEvent);    
}

function Item({ id, img }) {
    return (
        <View style={styles.imageBoxContainer} onLayout={(event) => getLayout(event, id)} >
            <Image source={img} />          
        </View>
    );
}  

<FlatList
    data={DATA}
    renderItem={({ item }) => <Item img={item.img} id={item.id}/>}
    keyExtractor={item => item.id}
/>

Answer 1

use CellRendererComponent instead of renderItem and you should be able to see x, y getting populated correctly.