ScrollView — یہ کیا ہے، اسکرول کنٹینر اور React Native

React Native میں ScrollView کیا ہے

ScrollView ایک React Native کمپونینٹ ہے جو اپنے مواد کو اسکرول ایبل کنٹینر میں لپیٹتا ہے۔ اگر مواد اسکرین کی حدود سے باہر نکل جائے تو صارف عمودی یا افقی طور پر اسکرول کر سکتا ہے۔ ScrollView ماؤنٹ ہونے پر تمام چائلڈ عناصر کو رینڈر کرتا ہے، خواہ وہ اسکرین پر نظر آئیں یا نہیں۔

FlatList کے برعکس، جو صرف نظر آنے والے عناصر کو رینڈر کرتا ہے (سست رینڈرنگ)، ScrollView فوری طور پر تمام مقامی ویوز بناتا ہے۔ یہ ScrollView کو فارمز، سیٹنگز پیجز، ایک اسکرین پر پروڈکٹ کارڈز کے لیے آسان بناتا ہے — جہاں بھی چائلڈ عناصر کی تعداد کم (20-30 تک) ہو یا ان کی صحیح تعداد پہلے سے معلوم نہ ہو۔

React Native Using ScrollView، 2024 کے مطابق، ScrollView نیسٹڈ اسکرولنگ (مثلاً ScrollView کے اندر ScrollView)، کنارے پر پہنچنے پر باؤنس اثر، اسکرول انڈیکیٹرز، اسنیپ پوزیشننگ اور جیسچر ہینڈلنگ کو سپورٹ کرتا ہے۔ iOS پر، ScrollView خود بخود contentInsetAdjustmentBehavior کے ذریعے SafeArea پیڈنگ شامل کرتا ہے۔

ScrollView کمپونینٹ کی خصوصیات اور API

ScrollView اسکرول رویے، ظاہری شکل اور انٹرایکٹیویٹی کو کنٹرول کرنے کے لیے خصوصیات کا ایک بھرپور سیٹ فراہم کرتا ہے۔ آئیے اہم گروپس کو دیکھتے ہیں: اسکرول کنٹرول، بصری ترتیبات، ایونٹس اور پلیٹ فارم سے متعلق خصوصیات۔

سمت اور اسکرول کنٹرول

horizontal — اسکرول کی سمت عمودی (ڈیفالٹ) سے افقی میں تبدیل کرتا ہے۔ scrollEnabled — ضرورت پڑنے پر اسکرولنگ کو غیر فعال کرتا ہے۔ showsVerticalScrollIndicator اور showsHorizontalScrollIndicator اسکرول انڈیکیٹرز کے ڈسپلے کو کنٹرول کرتے ہیں۔ bounces (iOS) مواد کے کنارے پر پہنچنے پر باؤنس اثر کو فعال/غیر فعال کرتا ہے۔

ScrollView ایونٹس

اہم ایونٹ onScroll ہے، جو ہر اسکرول پر فائر ہوتا ہے اور nativeEvent کے ساتھ ایک آبجیکٹ پاس کرتا ہے جس میں contentOffset (موجودہ پوزیشن)، contentSize (مواد کا سائز)، layoutMeasurement (نظر آنے والے علاقے کا سائز) ہوتا ہے۔ onMomentumScrollEnd انرشیل اسکرولنگ مکمل ہونے کے بعد فائر ہوتا ہے۔ onScrollEndDrag — جب صارف اسکرین سے انگلی اٹھاتا ہے۔ یہ ایونٹس لامحدود اسکرولنگ، پیرالیکس ایفیکٹس اور سست لوڈنگ کو لاگو کرنے کے لیے استعمال ہوتے ہیں۔

ref کے ذریعے پروگراماتی کنٹرول

ScrollView ref کے ذریعے پروگراماتی کنٹرول کے لیے طریقے فراہم کرتا ہے: scrollTo({x, y, animated}) مخصوص کوآرڈینیٹس پر اسکرول کرتا ہے، scrollToEnd({animated}) — مواد کے آخر تک اسکرول کرتا ہے، flashScrollIndicators() — عارضی طور پر اسکرول انڈیکیٹرز دکھاتا ہے۔

const scrollRef = useRef(null);

// اوپر اسکرول کریں
scrollRef.current.scrollTo({ x: 0, y: 0, animated: true });

// آخر تک اسکرول کریں
scrollRef.current.scrollToEnd({ animated: true });

اسکرول کا پروگراماتی کنٹرول اکثر چیٹس (تازہ ترین پیغام پر آٹو اسکرول)، فارمز (غلطی والے فیلڈ پر اسکرول) اور کیروسلز (پروگراماتی سوائپ) میں استعمال ہوتا ہے۔

ScrollView اور FlatList میں فرق

ScrollView اور FlatList کے درمیان انتخاب React Native میں اہم آرکیٹیکچرل فیصلوں میں سے ایک ہے۔ دونوں کمپونینٹس اسکرولنگ فراہم کرتے ہیں، لیکن بنیادی طور پر مختلف رینڈرنگ حکمت عملی استعمال کرتے ہیں۔ ScrollView سب کچھ ایک بار میں رینڈر کرتا ہے، FlatList — صرف نظر آنے والے عناصر۔

انتخاب کا قاعدہ: ScrollView — ان اسکرینوں کے لیے جہاں چائلڈ عناصر کی تعداد معلوم ہو اور 20-30 سے زیادہ نہ ہو (صارف پروفائل، سیٹنگز فارم، پروڈکٹ پیج)۔ FlatList — ممکنہ طور پر بہت سے عناصر والی فہرستوں کے لیے (نیوز فیڈ، پروڈکٹ کیٹلاگ، چیٹ پیغامات)۔ اگر مواد متنوع ہو (ہیڈر، فارم، کارڈ، فوٹر) — ScrollView ترجیح دی جاتی ہے کیونکہ FlatList یکساں عناصر کی توقع کرتا ہے۔

افقی اسکرولنگ اور پیجینیشن

ScrollView horizontal prop کے ذریعے افقی اسکرولنگ کو سپورٹ کرتا ہے، جو اسے کیروسلز، امیج گیلریوں، ٹیبز اور افقی فہرستوں کے لیے مثالی بناتا ہے۔ pagingEnabled prop (iOS) یا snapToInterval کے ساتھ مل کر، ScrollView صفحہ پر مبنی نیویگیشن کے لیے ایک کمپونینٹ بن جاتا ہے۔

افقی کیروسل

horizontal پراپرٹی اسکرول کی سمت تبدیل کرتی ہے۔ pagingEnabled (iOS) صفحہ پر مبنی اسکرولنگ کو فعال کرتا ہے، جہاں اسکرول صرف عناصر کی حدود پر رکتا ہے۔ snapToInterval دونوں پلیٹ فارمز کے لیے پکسلز میں اسنیپ مرحلہ طے کرتا ہے۔

const ImageCarousel = ({ images }) => (
    <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onMomentumScrollEnd={handlePageChange}
    >
        {images.map((img, index) => (
            <Image
                key={index}
                source={{ uri: img }}
                style={{ width: SCREEN_WIDTH, height: 250 }}
            />
        ))}
    </ScrollView>
);

اس کیروسل میں، pagingEnabled خود بخود ہر تصویر کی حدود میں اسکرول کو اسنیپ کرتا ہے۔ onMomentumScrollEnd موجودہ صفحہ انڈیکیٹر کو اپ ڈیٹ کرنے کی اجازت دیتا ہے۔ ایسا کیروسل مقامی طور پر چلتا ہے اور انرشیل اسکرولنگ کو سپورٹ کرتا ہے۔

اسنیپ پوزیشننگ

غیر معیاری اسنیپ مراحل کے لیے، snapToInterval (پکسلز میں مرحلے کا سائز) اور snapToAlignment (start, center, end) استعمال کریں۔ snapToOffsets کے ساتھ آپ اسنیپ کے لیے مخصوص پوزیشنوں کی ایک صف بتا سکتے ہیں۔ یہ مختلف سائز کے کارڈز والی افقی فہرستوں کے لیے مفید ہے۔

ScrollView کے عملی مثالیں

آئیے دو عام منظرناموں کو دیکھتے ہیں: فارم اسکرین (عمودی اسکرول) اور افقی کیٹیگری فہرست۔ دونوں بہترین رویے کے لیے مختلف props کے ساتھ ScrollView استعمال کرتے ہیں۔

مثال 1: فارم کے ساتھ پروفائل اسکرین

پروفائل ترمیم صفحہ میں متنوع عناصر ہوتے ہیں: اوتار، کئی ان پٹ فیلڈز، سوئچز اور ایک محفوظ بٹن۔ ScrollView ہر بلاک کو الگ الگ کرنے کے بجائے پورے صفحے کو ایک ساتھ اسکرول کرنے کی اجازت دیتا ہے۔

const ProfileScreen = () => (
    <ScrollView
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
    >
        <AvatarPicker />
        <TextInput placeholder="Name" />
        <TextInput placeholder="Email" />
        <TextInput placeholder="About me" multiline />
        <SwitchRow label="Notifications" />
        <Button title="Save" />
    </ScrollView>
);

keyboardShouldPersistTaps: 'handled' prop کی بورڈ کھلا ہونے پر فارم کے ساتھ اسکرول اور تعامل کی اجازت دیتا ہے۔ contentContainerStyle تمام مواد پر پیڈنگ لگاتا ہے۔ یہ پیٹرن React Native کے تمام فارم اسکرینوں میں استعمال ہوتا ہے۔

مثال 2: افقی کیٹیگری فہرست

کیٹیگریز (چیٹس، فلٹرز، ٹیبز) میں نیویگیٹ کرنے کے لیے، چپس کے ساتھ افقی ScrollView استعمال کیا جاتا ہے۔ یہ کمپونینٹ عام طور پر مارکیٹ پلیس اور سوشل میڈیا ایپلی کیشنز میں پایا جاتا ہے۔

const CategoryChips = ({ categories, selected, onSelect }) => (
    <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.chipContainer}
    >
        {categories.map((cat) => (
            <Chip
                key={cat.id}
                label={cat.name}
                isSelected={selected === cat.id}
                onPress={() => onSelect(cat.id)}
            />
        ))}
    </ScrollView>
);

انڈیکیٹر بند کے ساتھ افقی ScrollView کیٹیگری سٹرپس کے لیے معیاری ہے۔ ہر چپ انتخاب کی حالت کے ساتھ ایک علیحدہ کمپونینٹ ہے۔ showsHorizontalScrollIndicator: false prop اسکرول بار کو ہٹاتا ہے، جو موبائل ایپ صارفین کی توقعات سے مطابقت رکھتا ہے۔