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](https://i.stack.imgur.com/3zbKH.jpg)

And this is What I am having [a smashed List of all the rendered views](https://i.stack.imgur.com/m7p8W.png)

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,
  },

```