How to fix the overlap of the last element?

Question

React Native

Here's the snack:
https://snack.expo.io/@aimodding/overlay
I just generated 20 lines there: And here's what I get: the 20th element is hidden under the "basement".
const items = Array.from({length:20},(v,k)=>k+1);

Answer 1

Add padding to the list to the height of the footer

<FlatList
    style={{ backgroundColor: background, marginBottom: 60 }}
>
...
</FlatList>

Answer 2

No, you should not remove the indents, since it will be more difficult to reuse them later in the future if you render the list as a separate component.
Remove position: 'absolute' and everything will be fine, it will stand exactly below the list.

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bottom: {
   position: 'absolute', // <-- удалите эту строку
    left: 0,
    right: 0,
    bottom: 0,
  },
});