React Native FlatList not scrolling to end

The ultimate solution is ✔

Any view/subview that holds a flatlist must have a flex of 1 - Regardless of how deep.

So if you apply this and it's not working, check your styling and make sure there's no mistake somewhere.

Add style={{flex: 1}} for each View element who is a parent for FlatList.

I'm not sure if your scenario is exactly the same as one I encountered on a project a few months ago, but I noticed that I had to add a margin/padding (depends on what you prefer) to lift the bottom of the scrollable container. This was usually because a parent container seemed to interfere with the styling of the scrollable element.

Have you tried adding flexGrow: 1 to your styling in place of flex?

I had the same issue and just found the solution. Add the prop ListFooterComponentby giving it a React element/component. I just passed a view with the preferable height and it worked for me perfectly.

Here is the code snippet:

<FlatList
        data={DATA}
        renderItem={({ item }) => (<ListItem itemData={item} />) }
        keyExtractor={item => item.id}
        ListFooterComponent={<View style={{height: 20}}/>}
      />

This works 100%!