How to fix the React Native FlatList last item not visible issue?

Sometimes, we want to fix the React Native FlatList last item not visible issue.

In this article, we’ll look at how to fix the React Native FlatList last item not visible issue.

How to fix the React Native FlatList last item not visible issue?

To fix the React Native FlatList last item not visible issue, we can add bottom padding to the FlatList.

For instance, we write:

import * as React from 'react';
import { View, FlatList, Text } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

const DATA = Array(100)
  .fill()
  .map((_, i) => ({ id: i, title: i }));

const Item = ({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
);

export default function App() {
  const renderItem = ({ item }) => <Item title={item.title} />;

  return (
    <View>
      <FlatList
        style={{ height: '100%', paddingBottom: 50 }}
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

to add a FlatList and set its paddingBottom style to 50 pixels to add some padding at the bottom of the FlatList.

We render the item with the renderitem function to render each DATA entry.

And we set keyExtractor to a function to return the unique ID property value from the DATA entries.

Conclusion

To fix the React Native FlatList last item not visible issue, we can add bottom padding to the FlatList.