Mapping in React Native

FlatList / Scrolling Component in React native

March 28, 2023

To create a horizontally scrolling FlatList in React Native, you can set the horizontal property to true. Here’s a simple example:

Explanation

  • horizontal={true}: This enables horizontal scrolling.
  • showsHorizontalScrollIndicator={false}: Hides the horizontal scroll indicator for a cleaner look.

Additional Tips

  • Adjust the padding, marginHorizontal, or borderRadius in item style as needed to control item spacing and appearance.
  • You can add snapToInterval or pagingEnabled for a snapping or paginated effect if you want each item to "snap" into place when scrolling.

import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';

const data = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
  { id: '4', title: 'Item 4' },
  { id: '5', title: 'Item 5' },
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
  { id: '4', title: 'Item 4' },
  { id: '5', title: 'Item 5' },
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
  { id: '4', title: 'Item 4' },
  { id: '5', title: 'Item 5' },
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
  { id: '4', title: 'Item 4' },
  { id: '5', title: 'Item 5' },
];

const HorizontalFlatList = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
          </View>
        )}
        // keyExtractor={item => item.id}
        horizontal={true} // Enable horizontal scrolling
        //showsHorizontalScrollIndicator={false} // Hide the scroll indicator
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginHorizontal: 10,
    borderRadius: 10,
  },
  title: {
    fontSize: 18,
  },
});

export default HorizontalFlatList;