How to show list in reverse direction in React Native? Code Example

FlatList provides inverted prop which when set to true, reverses the list. The first item in data array is displayed at the last of the list. The scrollbar is also scrolled to the bottom of the list automatically.

This option is useful for applications like chat messaging where most recent messages are displayed at the bottom. An inverted list is most suited here.

Code Example

import React, { useState } from "react";
import { FlatList, SafeAreaView, StyleSheet, Text, View, StatusBar } from "react-native";

const SUPERHERO_DATA = [
  {
    id: '1',
    title: 'Ironman',
  },
  {
    id: '2',
    title: 'Thor',
  },
  {
    id: '3',
    title: 'Captain America',
  },
  {
    id: '4',
    title: 'Hulk',
  },
  {
    id: '5',
    title: 'Hawkeye',
  },
  {
    id: '6',
    title: 'Spiderman',
  },
  {
    id: '7',
    title: 'Antman',
  },
];

const App = () => {
  
  const renderItem = ({ item, index, separators }) => (
    <View style={styles.item}>
        <Text>{item.title}</Text>
      </View>
  )

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={SUPERHERO_DATA}
        renderItem={renderItem}
        inverted={true}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 0.5,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#fff000',
    padding: 10,
    flex:1,
    margin: 5,
  },
});

export default App;

The output will look like this –

From the image you can see that the list items are displayed in reverse order. Also the scrollbar is scrolled to the end. To achieve this, we added inverted prop at line number 48.

Live Demo

Conclusion

In many real world applications the list is rendered in reverse order. One of the popular example is chat applications. There could be many use cases like comments on posts, articles list, candidates lists, voting list etc.