I have a simple compoenent set up as to demonstrate my issue.

I have a base component BaseScreenCenterTop

const BaseScreenCenterTop = ({ children, ...props }) => {
  return (
    <View style={[styles.container, props.style]}>
      {children}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'flex-start',
    width: '100%',
    height: '100%',
    paddingVertical: 30
  },
})

and my main component:

<BaseScreenCenterTop>
  <View style={{backgroundColor: 'green', height: 30, width: '100%'}}>
  </View>
  <View>
    <FlatList
      data={doc.items}
      renderItem={({ item }) => renderItem(item)}
      keyExtractor={item => item.id}
    />
  </View>
  <View>
    <Button
      title="Test"
    />
  </View>
</BaseScreenCenterTop>

The result I get is:

And I want the FlatList to get the full height, but still have the Button visible at the end.

I tried many things to fix this, but it seems that the FlatList just sets its height to the maximum it can get until the end of the view, ignoring that there is stuff after it.

Thank you!