Here's a snack:
https://snack.expo.io/@aimodding/overlay

I just generated 20 lines there:
const items=Array.from({length: 20},(v, k)=>k + 1);

And that's what I get:



The 20th element hid under the"basement".

2 Answers 2

Add a missing basement to the list
<FlatList
    style={{backgroundColor: background, marginBottom: 60}}
>
...
</FlatList>
  • Thanks for the reply.
    And this number is 60, will it work correctly on any screen? On the horizontal, on the vertical, on the tablet, etc.?
    – Chinese Paintball May 29 '19 at 09:29
  • Chinese Paintball, in your example, yes, the height of the footer is always 56, but you can, for example, do this
    – Musical Alien May 29 '19 at 09:40
No, you should not delete indents, since it will be more difficult to reuse later in the future if you list the list as a separate component.
Remove position:'absolute'and everything will be fine, it will rise exactly under the list.

const styles=StyleSheet.create({
  container: {
    flex: 1,
  },
  bottom: {
   position:'absolute', //<- delete this line
    left: 0,
    right: 0,
    bottom: 0,
  },
});