React- Native- App -Development

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 App = () => {
  const data = [
    { id: '1', title: 'Item 1' },
    { id: '2', title: 'Item 2' },
    { id: '3', title: 'Item 3' },
    { id: '4', title: 'Item 4' },
  ];

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

  return (
    <FlatList
      data={data}
      keyExtractor={item => item.id}
      renderItem={renderItem}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  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!