React Native - Как получить размеры renderItem в Flatlist

У меня есть горизонтальный Flatlist, где элементы могут быть разной высоты. Как я могу получить высоту всех элементов или определенного видимого элемента и, в зависимости от высоты элемента, изменить высоту Flatlist?

Я сделал код, близкий к моему, на Snack. В примере высота в data указана для примера, в моем коде я НЕ ЗНАЮ эту высоту.

Буду очень признателен за помощь!

import React from 'react';
import { View, StyleSheet, FlatList, Text, Dimensions } from 'react-native';
const {width} = Dimensions.get('window');

const Item = ({item}) => {
  return (
    <View style={{width, height: item.height, backgroundColor: 'yellow'}}>
      <Text>{item.type}</Text>
      <Text>{item.text}</Text>
    </View>
  );
};

export default function App() {
  const data = [
    { 
      height: 100, //FOR EXAMPLE
      type: 'row 1', 
      text: 'row 1'
    },
    { 
      height: 200, //FOR EXAMPLE
      type: 'row 2', 
      text: 'row 2'
    },
    { 
      height: 150, //FOR EXAMPLE
      type: 'row 3', 
      text: 'row 3'
    },
  ];

  return (
    <View>
      <FlatList
        style={{backgroundColor: 'red'}}
        data={data}
        keyExtractor={item => item.id}
        renderItem={({item}) => (
            <Item item={item} />
          )
        }
        horizontal
        pagingEnabled
      />
    </View>
  );
}

Ответы (0 шт):