📄 React Native + Backend Connectivity: Pagination ও Infinite Scroll (TypeScript)

এই টিউটোরিয়ালে আমরা দেখব কিভাবে **React Native (File-based) অ্যাপে Backend API থেকে ডেটা লোড করা যায়** এবং তা **Pagination ও Infinite Scroll** এর মাধ্যমে সুন্দরভাবে প্রদর্শন করা যায়। আমরা **TypeScript** ব্যবহার করব। এটি বিশেষভাবে শিক্ষার্থীদের জন্য সহজ ও বোধগম্য হবে।

📌 ১. API থেকে ডেটা লোড করা

প্রথমে আমরা একটি ফাংশন লিখব যেটি API থেকে ডেটা আনবে। আমরা ধরছি আমাদের API `https://example.com/posts?page=1&limit=10` আকারের Pagination সাপোর্ট করে।

type Post = {
  id: number;
  title: string;
  body: string;
};

const fetchPosts = async (page: number, limit: number = 10): Promise<Post[]> => {
  const response = await fetch(`https://example.com/posts?page=${page}&limit=${limit}`);
  const data = await response.json();
  return data;
};
  

📌 ২. Pagination Setup

Pagination এর জন্য আমরা state ব্যবহার করব: `posts`, `page`, `loading`, এবং `hasMore`।

const [posts, setPosts] = useState<Post[]>([]);
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);

const loadPosts = async () => {
  if (loading || !hasMore) return;
  setLoading(true);
  const newPosts = await fetchPosts(page);
  setPosts([...posts, ...newPosts]);
  setHasMore(newPosts.length > 0);
  setPage(page + 1);
  setLoading(false);
};
  

📌 ৩. FlatList & Infinite Scroll

আমরা FlatList ব্যবহার করব ডেটা প্রদর্শনের জন্য এবং `onEndReached` দিয়ে Infinite Scroll ইমপ্লিমেন্ট করব।

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

return (
  <FlatList
    data={posts}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({ item }) => (
      <View className="p-4 border-b border-teal-200">
        <Text className="text-lg font-semibold text-teal-700">{item.title}</Text>
        <Text className="text-gray-700">{item.body}</Text>
      </View>
    )}
    onEndReached={loadPosts}
    onEndReachedThreshold={0.5}
    ListFooterComponent={loading ? <ActivityIndicator size="large" color="teal" /> : null}
  />
);
  

📌 ৪. Output Example

উপরের কোড ব্যবহার করলে অ্যাপে এই রকম UI দেখা যাবে:

• প্রথমে প্রথম ১০টি পোস্ট লোড হবে।
• নিচে স্ক্রল করলে আরও পোস্ট স্বয়ংক্রিয়ভাবে লোড হবে।
• লোডিং চলাকালীন ActivityIndicator দেখাবে।

✨ Tips & Best Practices

• FlatList-এর keyExtractor ব্যবহার করা অবশ্যক, এটি performance বাড়ায়।
• Heavy computation বা large data প্রসেস করলে background thread ব্যবহার করুন।
• API pagination ব্যবহার করে network request কমানো যায়।
• ActivityIndicator দিয়ে user experience সুন্দর করুন।
• TypeScript ব্যবহার করে type safety নিশ্চিত করুন।

✔ এই টিউটোরিয়াল ফলো করলে আপনি React Native অ্যাপে **Backend Connectivity, Pagination & Infinite Scroll** সুন্দরভাবে ইমপ্লিমেন্ট করতে পারবেন।