Working with ScrollView & FlatList in React Native

Mobile App-এর প্রায় সব স্ক্রিনেই লম্বা কনটেন্ট দেখা যায় যা স্ক্রল করার প্রয়োজন হয়। React Native এই স্ক্রলিং কন্টেন্ট দেখানোর জন্য দুটি গুরুত্বপূর্ণ component প্রদান করে —

ScrollView
FlatList

এই দুটি component-এর কাজ একই হলেও ব্যবহার করার উদ্দেশ্য এবং performance আলাদা। নিচে খুব সহজভাবে বাংলায় উভয় component ব্যাখ্যা করা হলো।

📌 1. ScrollView — সব কনটেন্ট একসাথে Render করে

ScrollView ব্যবহার করা হয় যখন কন্টেন্ট কম থাকে, অর্থাৎ items খুব বেশি না। ScrollView সব items একসাথে render করে, ফলে বড় লিস্ট বা অনেক ডেটা হলে performance কমে যায়।

🔹 ScrollView এর বৈশিষ্ট্য

সব আইটেম একবারে render করে
ছোট লিস্টের জন্য perfect
Vertical এবং Horizontal দুই ধরনের scrolling সাপোর্ট করে

🔹 ScrollView Example

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

export default function App() {
  return (
    <ScrollView style={{ padding: 20 }}>
      {[...Array(20)].map((_, index) => (
        <View 
          key={index} 
          style={{
            backgroundColor: "#e0f2f1",
            padding: 15,
            marginBottom: 10,
            borderRadius: 8
          }}
        >
          <Text style={{ fontSize: 18 }}>Item {index + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

ScrollView ছোট লিস্ট বা static কনটেন্টের জন্য ideal।

📌 2. FlatList — Large List এর জন্য High Performance Component

FlatList বড় লিস্ট দেখানোর জন্য সবচেয়ে efficient component। এটি screen-এ যতটুকু item দেখা যায় শুধুমাত্র সেই item গুলো render করে এবং বাকি item গুলো user scroll করার সময় render হয়।

🔹 FlatList এর বৈশিষ্ট্য

Lazy loading (দেখার সময় item render)
Best for 100+ items
Header, Footer, Separator যুক্ত করার সুবিধা
On-demand rendering

🔹 FlatList Example

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

const data = Array.from({ length: 50 }, (_, i) => ({
  id: i.toString(),
  title: `Item ${i + 1}`
}));

export default function App() {
  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      style={{ padding: 20 }}
      renderItem={({ item }) => (
        <View
          style={{
            backgroundColor: "#e0f2f1",
            padding: 15,
            marginBottom: 10,
            borderRadius: 8
          }}
        >
          <Text style={{ fontSize: 18 }}>{item.title}</Text>
        </View>
      )}
    />
  );
}

যেকোনো বড় লিস্ট, API Response, ডেটাবেস ডেটা show করার জন্য FlatList সেরা।

📌 3. ScrollView vs FlatList Comparison

Feature	ScrollView	FlatList
Rendering	All items at once	Lazy loading
Performance	Low for large lists	High performance
Best For	Small static content	Dynamic + large data
Extra Features	None	Header, Footer, Separator

📌 4. কোনটা কখন ব্যবহার করবেন?

ScrollView → যখন ডেটা খুব কম এবং সব একসাথে দেখাতে চান।
FlatList → যখন লিস্ট বড়, dynamic বা API থেকে আসে।

✅ Conclusion

React Native-এ স্ক্রল করা ডেটা manage করার জন্য ScrollView এবং FlatList খুব গুরুত্বপূর্ণ। ছোট লিস্টের জন্য ScrollView ঠিক আছে, কিন্তু বড় ডেটার জন্য সর্বদা FlatList ব্যবহার করা উচিত।

👉 Next Topic Suggestion: Handling TextInput & Forms in React Native

Working with ScrollView & FlatList