Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1675

full screen height flatlist items

$
0
0

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?


Viewing all articles
Browse latest Browse all 1675

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>