I'm having trouble trying to display a list of Views using flex with 100% height, the issue comes when it renders the list from Flat list, I might do something wrong with flex.
This is what I want: A Flat list with same height when scrolls I will go to another component
And this is What I am having a smashed List of all the rendered views
The flatList is just this :
<FlatList
pagingEnabled={true}
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
And the container from the Views I am rendering looks like this (css)
container: {
alignItems: 'center',
// TODO: check how why the screen is forguetting the tab, thats why I put the height like that
width: '100%',
height: '100%',
justifyContent: 'space-around',
flex: 1,
},
Use onLayout to get the height of the parent container and use that to set the height of
FlatList
items:Example Output:
Full source code:
You can find the working app example here: Expo Snack