ExpoIntermediate

ScrollView বনাম FlatList — long list সবসময় FlatList

scrollable content-এ ScrollView/FlatList বাছাই — নিয়ম ও উদাহরণ।

4টি অংশবাংলা ভাষায়

ছোট, নির্দিষ্ট content-এ `ScrollView`, আর বড় অথবা dynamic list-এ `FlatList` — performance ও memory-র তফাতই আসল কারণ।

app/(tabs)/all.tsxtsx

tsx

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

const tasks = ["দুধ", "রুটি", "ডিম"];

export default function AllTasks() {
  return (
    <FlatList
      data={tasks}
      keyExtractor={(item, index) => String(index)}
      renderItem={({ item }) => (
        <View style={{ padding: 12 }}>
          <Text>{item}</Text>
        </View>
      )}
    />
  );
}

FlatList শুধু দৃশ্যমান item render করে (virtualization); ScrollView সব একসাথে — হাজার item-এ lag নিশ্চিত।

FlatList-এর ৩টি bonus

ListEmptyComponent (খালি state), onRefresh + refreshing (pull-to-refresh), keyExtractor (unique key)। তিনটিই আসল app-এ প্রায়ই দরকার।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।