How to add a horizontal FlatList in React Native?

Sometimes, we want to add a horizontal FlatList in React Native.

In this article, we’ll look at how to add a horizontal FlatList in React Native.

How to add a horizontal FlatList in React Native?’

To add a horizontal FlatList in React Native, we just set the horizontal prop of the FlatList to true.

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} />;
  const keyExtractor = (item) => item.id;

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

to add horizontal to FlatList.

As a result, we can scroll through the FlatList items horizontally.

Conclusion

To add a horizontal FlatList in React Native, we just set the horizontal prop of the FlatList to true.