FlatList: یہ کیا ہے، React Native میں API اور اصلاح

FlatList کیا ہے؟

FlatList ایک React Native جزو ہے جو بڑے ڈیٹا سیٹس کی اعلیٰ کارکردگی رینڈرنگ کے ساتھ ورچوئلائزڈ فہرست کو نافذ کرتا ہے۔ یہ جزو VirtualizedList پر بنایا گیا ہے اور کسی بھی پیچیدگی کی فلیٹ فہرستیں بنانے کے لیے اعلانیہ API فراہم کرتا ہے۔

FlatList React Native 0.43 میں متروک ListView کے متبادل کے طور پر متعارف کرایا گیا تھا۔ Meta (2026) کے مطابق، FlatList فہرستوں کے ساتھ کام کرنے والی 85% React Native ایپلیکیشنز میں استعمال ہوتا ہے۔ یہ جزو تمام عام منظرناموں کو سپورٹ کرتا ہے: رابطے، خبروں کی فیڈز، پروڈکٹ کیٹلاگ اور چیٹ۔

تاریخ اور ایکو سسٹم میں مقام

FlatList سے پہلے، ڈویلپرز ListView استعمال کرتے تھے، جس کے لیے دستی سیل دوبارہ استعمال کی ترتیب درکار تھی۔ FlatList نے Android میں RecyclerView (2014) اور iOS میں UICollectionView (2012) کی طرح ونڈوڈ رینڈرنگ کو نافذ کرکے اس عمل کو خودکار کیا۔ جدید منصوبوں میں، FlatList کسی بھی فہرست کے لیے ڈی فیکٹو معیار ہے۔

FlatList ورچوئلائزیشن کیسے کام کرتی ہے

FlatList ورچوئلائزیشن ایک طریقہ کار ہے جہاں جزو صرف ان عناصر کو رینڈر کرتا ہے جو اسکرین کے نظر آنے والے علاقے میں آتے ہیں، ہر طرف ایک چھوٹے بفر کے ساتھ۔ باقی عناصر DOM میں نہیں بنائے جاتے، جس سے میموری بچتی ہے اور رینڈرنگ تیز ہوتی ہے۔

سکرول کرتے وقت، FlatList پہلے سے بنائے گئے View سیلز کو دوبارہ استعمال کرتا ہے، ان میں ڈیٹا تبدیل کرتا ہے۔ یہ 10,000 عناصر کی فہرست کے لیے ہزاروں Views بنانے سے روکتا ہے۔ ڈیفالٹ بفر سائز نظر آنے والے علاقے کے اوپر اور نیچے 10 عناصر ہے، لیکن یہ windowSize کے ذریعے ترتیب دیا جا سکتا ہے۔

ان پیرامیٹرز کی بہترین ترتیب سکرول کی ہمواری اور میموری کے استعمال کے درمیان توازن برقرار رکھنے کی اجازت دیتی ہے۔ بڑے عناصر والی فہرستوں کے لیے، windowSize کو 5-7 تک کم کرنے کی سفارش کی جاتی ہے۔

FlatList API اور اہم پراپرٹیز

FlatList API میں فہرست کی نمائش اور رویے کو ترتیب دینے کے لیے پراپرٹیز کا ایک سیٹ شامل ہے۔ دو لازمی پراپرٹیز ہیں data (ڈیٹا array) اور renderItem (عنصر رینڈرنگ فنکشن)۔ keyExtractor ہر عنصر کے لیے منفرد کلید فراہم کرکے کارکردگی کو بہتر بناتا ہے۔

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

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

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
};

ItemSeparatorComponent عناصر کے درمیان جداکنندہ شامل کرتا ہے، ListHeaderComponent اور ListFooterComponent فہرست میں ہیڈر اور فوٹر شامل کرتے ہیں۔ یہ اضافی ریپر کے بغیر پیچیدہ لے آؤٹ بنانے کی اجازت دیتا ہے۔

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
  },
});

FlatList کارکردگی کی اصلاح

FlatList کی اصلاح سینکڑوں اور ہزاروں عناصر والی ایپلیکیشنز کے لیے اہم ہے۔ صحیح ترتیب کے بغیر، فہرست سکرول کرتے وقت سست ہو سکتی ہے، ضرورت سے زیادہ میموری استعمال کر سکتی ہے اور کمزور آلات پر کریش کا سبب بن سکتی ہے۔

پہلا اصول منفرد اور مستحکم شناخت کنندگان کے ساتھ keyExtractor استعمال کرنا ہے۔ انڈیکس کو کلید کے طور پر استعمال کرنے سے غلط سیل دوبارہ استعمال اور اسٹیٹ بگز پیدا ہوتے ہیں۔ دوسرا اصول renderItem کو useCallback میں لپیٹنا اور عنصر کے جزو کے لیے React.memo استعمال کرنا ہے۔

مقررہ اونچائی کے لیے getItemLayout

اگر تمام عناصر کی اونچائی یکساں ہے، تو getItemLayout FlatList کو اجزاء کی پیمائش کیے بغیر سکرول پوزیشن کا حساب لگانے کی اجازت دیتا ہے۔ یہ خاص طور پر کسی مخصوص انڈیکس پر سکرول کرتے وقت نمایاں کارکردگی کا فائدہ فراہم کرتا ہے۔

const ITEM_HEIGHT = 80;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  getItemLayout={getItemLayout}
  renderItem={renderItem}
/FlatList>

ڈیٹا کے لیے useMemo غیر ضروری دوبارہ رینڈرنگ کو روکتا ہے۔ اگر ڈیٹا API سے آتا ہے، تو اسے ایک بار تبدیل کریں اور کیش کریں۔ عنصر کے جزو کے لیے React.memo استعمال کریں تاکہ غیر تبدیل شدہ عناصر کی رینڈرنگ سے بچا جا سکے۔

افقی فہرستیں اور کیروسل

افقی FlatList horizontal={true} پراپرٹی شامل کرکے بنایا جاتا ہے۔ فہرست سکرول کی سمت کو X محور میں تبدیل کرتی ہے، جو پروڈکٹ کیروسل، تصویری گیلریوں اور افقی مینیو کے لیے آسان ہے۔

افقی موڈ میں، مقامی کیروسل کی طرح مرحلہ وار سکرولنگ کے لیے snapToInterval اور snapToAlignment کو صحیح طریقے سے ترتیب دینا اہم ہے۔ جزو خود بخود مومینٹم اور انگلی اٹھانے کو سنبھالتا ہے، قریب ترین عنصر پر رکتا ہے۔

<FlatList
  horizontal
  data={images}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  snapToInterval={CARD_WIDTH + GAP}
  snapToAlignment="start"
  decelerationRate="fast"
  pagingEnabled
  onViewableItemsChanged={onViewableItemsChanged}
/>

onViewableItemsChanged ایک کال بیک ہے جو نظر آنے والے عناصر کے تبدیل ہونے پر متحرک ہوتا ہے۔ یہ تجزیات، سست تصویری لوڈنگ اور صرف نظر آنے والے کارڈز کے لیے ویڈیو ایکٹیویشن کے لیے استعمال ہوتا ہے۔

پل ٹو رفریش اور لامحدود سکرول

پل ٹو رفریش FlatList میں refreshing اور onRefresh پراپرٹیز کے ذریعے نافذ کیا جاتا ہے، جو لوڈنگ کی حالت کے ساتھ مل کر کام کرتی ہیں۔ فہرست کو نیچے کھینچنے پر onRefresh کال ہوتا ہے، اور refreshing جھنڈا بار بار کالوں کو روکتا ہے۔

لامحدود سکرول onEndReached کے ذریعے ترتیب دیا جاتا ہے — ایک کال بیک جو فہرست کے اختتام کے قریب پہنچنے پر متحرک ہوتا ہے۔ onEndReachedThreshold طے کرتا ہے کہ اختتام سے کتنے عناصر پہلے ایونٹ فائر ہوتا ہے۔ عام طور پر کرسر پر مبنی پیجینیشن استعمال کیا جاتا ہے۔

const ListWithPagination = () => {
  const [data, setData] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const [refreshing, setRefreshing] = React.useState(false);

  const loadMore = React.useCallback(async () => {
    const newData = await fetchPage(page);
    setData(prev => [...prev, ...newData]);
    setPage(p => p + 1);
  }, [page]);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      refreshing={refreshing}
      onRefresh={loadMore}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
    />
  );
};

اہم: onEndReached متعدد بار کال ہو سکتا ہے۔ پچھلی درخواست مکمل ہونے تک بار بار درخواستوں کو روکنے کے لیے isLoading جھنڈا شامل کریں۔ لوڈنگ کی نشاندہی کرنے کے لیے ListFooterComponent میں ActivityIndicator استعمال کریں۔