I am trying to implement a FlatList with full screen size items, but haven't been able to do it without manually setting the items height based on the available screensize and I was wondering if it was possible to do it with flex box properties instead.
Here is the snack example of what I want to acomplish: https://snack.expo.dev/@xeitor/full-heigth-flatlist-items. And here is the code:
import React from 'react';import {StyleSheet, View, FlatList, Text, Dimensions} from 'react-native';const Flex = () => { const items = [ {id: 1, name: 'item 1', backgroundColor: 'red'}, {id: 2, name: 'item 2', backgroundColor: 'darkorange'}, {id: 3, name: 'item 3', backgroundColor: 'green'}, {id: 4, name: 'item 4', backgroundColor: 'blue'}, {id: 5, name: 'item 5', backgroundColor: 'purple'}, ]; const renderItem = ({item}) => (<View style={[styles.item, {backgroundColor: item.backgroundColor}]}><Text style={styles.text}>{item.name}</Text></View> ); return (<FlatList data={items} renderItem={renderItem} keyExtractor={item => item.id.toString()} pagingEnabled showsVerticalScrollIndicator={false} snapToAlignment="start" decelerationRate="fast" snapToInterval={Dimensions.get('window').height} /> );};const styles = StyleSheet.create({ item: { height: Dimensions.get('window').height, justifyContent: 'center', alignItems: 'center', }, text: { color: 'white', fontSize: 24, },});export default Flex;Is it even possible to do this with flex properties or any other way that doesn't require calculating available screen size?