Chapter 6: Working with Lists

1. Introduction to ScrollView

Overview: ScrollView is a basic React Native component that allows for scrolling content within a view. It can be used to display vertically or horizontally scrollable content.

Usage Example:

import React from "react";
import { ScrollView, Text, StyleSheet } from "react-native";

const MyScrollView = () => {
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.text}>Item 1</Text>
      <Text style={styles.text}>Item 2</Text>
      <Text style={styles.text}>Item 3</Text>
      <Text style={styles.text}>Item 4</Text>
      {/* Add more items as needed */}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    margin: 20,
  },
  text: {
    fontSize: 20,
    marginVertical: 10,
  },
});

export default MyScrollView;

Key Points:
- ScrollView should be used when the number of items is relatively small.
- Nesting views inside a ScrollView can affect performance, especially with a large number of items.

2. Creating Simple Lists with FlatList

Overview: FlatList is a performant and efficient way to render large lists of data in React Native.

Usage Example:

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

const data = [
  { id: "1", title: "Item 1" },
  { id: "2", title: "Item 2" },
  { id: "3", title: "Item 3" },
  // Add more items
];

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

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#ccc",
  },
  text: {
    fontSize: 18,
  },
});

export default MyFlatList;

Key Points:
- FlatList only renders items that are currently visible, making it highly performant.
- You can customize the rendering of items using the renderItem prop.
- The keyExtractor is used to uniquely identify items.

3. Handling Sectioned Data with SectionList

Overview: SectionList is similar to FlatList, but it allows you to render sections of data with headers.

Usage Example:

import React from "react";
import { SectionList, Text, StyleSheet, View } from "react-native";

const sections = [
  {
    title: "Fruits",
    data: ["Apple", "Orange", "Banana"],
  },
  {
    title: "Vegetables",
    data: ["Carrot", "Broccoli", "Spinach"],
  },
];

const MySectionList = () => {
  return (
    <SectionList
      sections={sections}
      renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
      renderSectionHeader={({ section }) => (
        <Text style={styles.header}>{section.title}</Text>
      )}
      keyExtractor={(item, index) => item + index}
    />
  );
};

const styles = StyleSheet.create({
  header: {
    fontSize: 22,
    backgroundColor: "#f2f2f2",
    padding: 10,
  },
  item: {
    fontSize: 18,
    padding: 10,
  },
});

export default MySectionList;

Key Points:
- SectionList allows for the grouping of data into sections, each with its own header.
- It is suitable for structured lists, such as categories or timelines.

4. Optimizing List Performance with VirtualizedList

Overview: VirtualizedList is a low-level component that FlatList and SectionList are built on. It provides more control over rendering and performance optimization.

Usage Example:

import React from "react";
import { VirtualizedList, Text, StyleSheet, View } from "react-native";

const getItem = (data, index) => ({
  id: Math.random().toString(),
  title: `Item ${index + 1}`,
});

const getItemCount = (data) => 50;

const MyVirtualizedList = () => {
  return (
    <VirtualizedList
      data={[]}
      initialNumToRender={4}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.text}>{item.title}</Text>
        </View>
      )}
      keyExtractor={(item) => item.id}
      getItem={getItem}
      getItemCount={getItemCount}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#ccc",
  },
  text: {
    fontSize: 18,
  },
});

export default MyVirtualizedList;

Key Points:
- VirtualizedList offers flexibility but requires more manual handling of data.
- Useful for complex cases where FlatList and SectionList don't offer the needed control.