How to invert a FlatList with React Native?

Sometimes, we want to invert a FlatList with React Native.

In this article, we’ll look at how to invert a FlatList with React Native.

How to invert a FlatList with React Native?

To invert a FlatList with React Native, we can add the inverted prop.

For instance, we write:

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

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

const Item = ({ title }) => (
  <View
    style={{
      backgroundColor: '#f9c2ff',
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
    }}>
    <Text>{title}</Text>
  </View>
);

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

  return (
    <View style={{ height: 300 }}>
      <FlatList
        inverted
        data={flatListItems}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

to add the inverted prop to the FlatList.

Now the items are displayed in reversed order and we scroll up to scroll through the list instead of down.

Conclusion

To invert a FlatList with React Native, we can add the inverted prop.