Lists and ScrollView in React Native

# CHAPTER 12

Lists and ScrollView in React Native #

1. Introduction #

2. Learning Objectives #

• Implement a basic ScrollView for small, static content screens.

• Understand the catastrophic memory issues of mapping large arrays inside a ScrollView.

• Implement a FlatList for massive, dynamic datasets.

• Utilize the data, renderItem, and keyExtractor props.

• Build a structured SectionList for categorized data.

3. The ScrollView Component #

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

export default function TermsScreen() {
  return (
    // Replaced View with ScrollView!
    <ScrollView style={{ padding: 20 }}> 
      <Text style={{ fontSize: 30 }}>Terms of Service</Text>
      <View style={{ height: 1000, backgroundColor: &#039;lightgrey&#039;, marginVertical: 20 }}>
        {/* Massive tall box representing lots of text */}
        <Text>Scroll down to read more...</Text>
      </View>
      <Text>End of Terms.</Text>
    </ScrollView>
  );
}

4. The ScrollView Memory Trap #

5. The Solution: FlatList #

6. Using FlatList (The 3 Core Props) #

1. 1. data: The raw JavaScript array (the 5,000 objects).

1. 2. renderItem: A function that explains *how* to draw one single object from that array.

1. 3. keyExtractor: A function that tells React how to find the unique ID of each object.

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

// 1. The Raw Data Array
const PRODUCTS = [
  { id: '1', title: 'Laptop', price: '$999' },
  { id: '2', title: 'Phone', price: '$699' },
  { id: '3', title: 'Tablet', price: '$499' },
  // ... imagine 5,000 more items here
];

export default function StoreScreen() {
  
  // 2. The Render Function (Destructures the single 'item' from the array)
  const renderProductCard = ({ item }) => (
    <View style={styles.card}>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.price}>{item.price}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={PRODUCTS} // Pass the array
        renderItem={renderProductCard} // Pass the UI blueprint
        keyExtractor={item => item.id} // Tell it where the unique ID is!
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: &#039;#f0f0f0&#039; },
  card: { backgroundColor: &#039;white&#039;, padding: 20, margin: 10, borderRadius: 8 },
  title: { fontSize: 18, fontWeight: &#039;bold&#039; },
  price: { color: &#039;green&#039;, marginTop: 5 }
});

7. SectionList (Categorized Data) #

const MENU_DATA = [
  { title: 'Main Courses', data: ['Pizza', 'Burger', 'Steak'] },
  { title: 'Desserts', data: ['Ice Cream', 'Cake'] },
];

<SectionList
  sections={MENU_DATA}
  keyExtractor={(item, index) => item + index}
  // Renders the individual item
  renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
  // Renders the bold Header!
  renderSectionHeader={({ section: { title } }) => (
    <Text style={styles.header}>{title}</Text>
  )}
/>

8. Visual Learning: FlatList Lazy Rendering #

[ RAW ARRAY: 5000 Items ]
        |
   (FlatList engine reads data)
        |
[ PHONE SCREEN VISIBLE AREA ]
+-------------------------+
| [ Rendered Item 1 ]     | <-- Top item is about to scroll off.
| [ Rendered Item 2 ]     |
| [ Rendered Item 3 ]     |
+-------------------------+
| [ Rendered Item 4 ]     | <-- Item 4 is created JUST as it enters the screen.
| [ (Items 5-5000)  ]     | <-- NOT RENDERED YET. RAM IS SAVED.

9. Common Mistakes #

• Forgetting Destructuring in renderItem: The renderItem function does NOT just pass the raw object. It passes a wrapper object containing layout data, indices, AND your item.

10. Best Practices #

• Never nest Virtualized Lists: Never put a FlatList directly inside a ScrollView. They both contain complex scrolling math engines. They will fight each other, resulting in erratic scrolling behavior and console warnings. FlatList scrolls by itself automatically; it does not need a parent ScrollView.

11. Practice Exercises #

1. 1. What specific prop in a FlatList tells React how to uniquely identify each row so it can efficiently update or delete items without redrawing the whole list?

1. 2. Write the syntax required to render an array of strings ['Apple', 'Banana'] into a FlatList.

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the mechanical difference between standard rendering in a ScrollView versus virtualized, lazy rendering in a FlatList.

• Q: Describe the specific purpose of the keyExtractor prop in a FlatList. How does React utilize these unique keys during the reconciliation phase when a list item is deleted?

• Q: A developer has nested a vertical FlatList directly inside a vertical ScrollView. Explain why the React Native engine issues a severe warning against this pattern and what UI bugs it creates.

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #