? ScrollView & FlatList in React Native

? Quick Overview

In React Native, ScrollView and FlatList are used to display scrollable content. ScrollView is suitable for small content, while FlatList is optimized for large data sets.

? Key Concepts

• ScrollView renders all child components at once
• FlatList renders items lazily (better performance)
• FlatList uses data and renderItem
• Keys are mandatory for list items

? Syntax / Theory

• ScrollView wraps multiple components vertically or horizontally
• FlatList is ideal for dynamic lists and APIs
• FlatList supports pull-to-refresh, pagination, and separators

? Interactive Simulator

Simulate adding items to a scrollable container (like a phone screen).

? Code Example – ScrollView

// ScrollView example for small static content
import { ScrollView, Text } from "react-native";

export default function App() {
  return (
    <ScrollView>
      <Text>Item 1</Text>
      <Text>Item 2</Text>
      <Text>Item 3</Text>
    </ScrollView>
  );
}

? Code Example – FlatList

// FlatList example for large dynamic lists
import { FlatList, Text } from "react-native";

const data = [
  { id: "1", name: "Apple" },
  { id: "2", name: "Banana" },
  { id: "3", name: "Orange" }
];

export default function App() {
  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

? Live Output / Explanation

? Interactive / Visual Understanding

Imagine ScrollView as a long paper already printed, while FlatList prints only what you can currently see on the screen.

? Use Cases

• ScrollView – forms, static pages, small content
• FlatList – chats, product lists, API data
• Horizontal carousels using FlatList