📜 React Native (TypeScript) এ ScrollView & FlatList

React Native অ্যাপে যখন অনেক কনটেন্ট বা লিস্ট দেখাতে হয়, তখন ScrollView এবং FlatList সবচেয়ে বেশি ব্যবহৃত হয়। এই লেসনে আমরা ফাইল–বেসড React Native (TypeScript) প্রজেক্টে ScrollView ও FlatList কীভাবে কাজ করে, উদাহরণ এবং আউটপুট সহ দেখব।

🔹 ScrollView কী?

ScrollView হলো একটি container component যেটার ভিতরে থাকা সব কনটেন্ট একসাথে render হয় এবং স্ক্রল করার সুবিধা দেয়।

📄 ScrollView Example (TypeScript)

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

const ScrollExample = (): JSX.Element => {
  return (
    <ScrollView>
      {Array.from({ length: 20 }).map((_, index) => (
        <View key={index} style={{ padding: 20 }}>
          <Text>Item {index + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

export default ScrollExample;
  

🔹 FlatList কী?

FlatList হলো React Native এর সবচেয়ে powerful list component। এটি শুধুমাত্র স্ক্রিনে দেখা item গুলো render করে, ফলে অ্যাপ অনেক ফাস্ট ও মেমোরি–এফিশিয়েন্ট হয়।

📄 FlatList Example (TypeScript)

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

type User = {
  id: string;
  name: string;
};

const DATA: User[] = [
  { id: '1', name: 'Rahul' },
  { id: '2', name: 'Amit' },
  { id: '3', name: 'Suman' },
];

const FlatListExample = (): JSX.Element => {
  return (
    <FlatList
      data={DATA}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={{ padding: 20 }}>
          <Text>{item.name}</Text>
        </View>
      )}
    />
  );
};

export default FlatListExample;
  

⚔ ScrollView vs FlatList

✅ Best Practices

• ডাটা বেশি হলে সবসময় FlatList ব্যবহার করুন
• keyExtractor অবশ্যই দিন
• ScrollView এর ভিতরে FlatList ব্যবহার করবেন না
• TypeScript ব্যবহার করে data type define করুন