RNative-Components

FlatList component

October 15, 2024

 In React Native, to create a flat list, you use the FlatList component, which is an efficient way to render lists of items. It handles performance optimizations like lazy loading and recycling views out of the box.

Here’s a basic example of how to implement a FlatList:

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

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

const App = () => {
  return (
    <FlatList
      data={DATA}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item.title}</Text>
        </View>
      )}
     
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderColor: '#ddd',
  },
  title: {
    fontSize: 18,
  },
});

export default App;

Key Concepts:
  • data: The list of items to display, an array of objects.
  • renderItem: A function that takes an item from the data array and returns a React component to render.
  • keyExtractor: A function that extracts a unique key from each item. This is important for performance and avoiding issues with re-rendering.

Additional Props:

  • horizontal={true}: Set the list to scroll horizontally.
  • numColumns={2}: Display multiple items in a grid (e.g., 2 columns).
  • onEndReached: Callback when the list reaches the end (useful for pagination).

Let me know if you'd like to dive deeper into any aspect! FlatList Horizontal Scrolling

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

const HorizontalFlatList = () => {
  const data = [
    { id: '1', name: 'Item 1' },
    { id: '2', name: 'Item 2' },
    { id: '3', name: 'Item 3' },
    { id: '4', name: 'Item 4' },
    { id: '5', name: 'Item 5' },
  ];

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.text}>{item.name}</Text>
    </View>
  );

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

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10, // Add some padding to the container
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginHorizontal: 10,
    borderRadius: 10,
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default HorizontalFlatList;