React Native موبائل ڈویلپمنٹ میں: یہ کیا ہے، کلیدی تصورات اور یہ کیسے کام کرتا ہے

بنیادی باتیں (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — UI بیان کرنے کے لیے JavaScript کا نحوی توسیع۔ HTML جیسا لگتا ہے لیکن React.createElement() کے ذریعے کام کرتا ہے۔ JSX اظہارات: {variable}، {condition && <View />}، {array.map()}۔ Functional Component — ایک فنکشن جو JSX واپس کرتا ہے۔ props کو دلیل کے طور پر لیتا ہے۔ React کا جدید معیار (React 16.8 سے پہلے Class Components استعمال ہوتے تھے)۔ Hooks — Functional Component سے حالت اور لائف سائیکل تک رسائی کے لیے فنکشنز۔ Hooks کے قواعد: صرف اوپری سطح پر، صرف Functional Components میں۔

Hooks حوالہ

useState — مقامی حالت۔ useEffect — ضمنی اثرات۔ useContext — Context تک رسائی۔ useRef — قابل تبدیلی حوالہ۔ useCallback — فنکشن میموائزیشن۔ useMemo — قدر میموائزیشن۔ Custom Hooks — دوبارہ قابل استعمال منطق: function useDebounce(value, delay)۔

// React Native میں hooks کے ساتھ Functional Component
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

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

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — [value, setValue] واپس کرتا ہے۔ setValue — تبدیل کرتا ہے (Class میں setState کی طرح ضم نہیں کرتا)۔ اشیاء کے لیے: setUser(prev => ({ ...prev, name: 'New' }))۔ useEffect — رینڈر کے بعد چلتا ہے۔ انحصار صف: [] — ایک بار (ماؤنٹ)، [dep] — جب dep بدلتا ہے، undefined — ہر رینڈر۔ صفائی فنکشن — return () => {}۔ useContext — const value = useContext(MyContext)۔ درخت میں اوپر Context.Provider درکار ہے۔

useRef — قابل تبدیلی آبجیکٹ جو رینڈرز کے درمیان قدر برقرار رکھتا ہے۔ .current — تبدیلی۔ استعمال: نیٹو عناصر تک رسائی (ref={inputRef})، پچھلی قدروں کا ذخیرہ، ٹائمر۔ useCallback — ایک میموائزڈ فنکشن واپس کرتا ہے۔ const handlePress = useCallback(() => {}, [dep])۔ useMemo — ایک میموائزڈ قدر واپس کرتا ہے۔ const sorted = useMemo(() => data.sort(), [data])۔ مہنگے حساب کے لیے useMemo استعمال کریں۔

useState — سادہ حالت کے لیے۔ useEffect — API کالز اور سبسکرپشنز کے لیے۔ useCallback/useMemo — اصلاح کے لیے۔ IT Sectr سب کچھ میموائز کرنے کی سفارش نہیں کرتا — صرف جب حقیقی کارکردگی کے مسائل ہوں۔

Custom Hooks

Custom Hook — ایک فنکشن جو بلٹ ان hooks استعمال کرتا ہے۔ نام use* سے شروع ہوتا ہے۔ مثالیں: useDebounce, useNetworkStatus, useAppState, useKeyboard۔ Custom Hooks React Native میں منطق کو دوبارہ استعمال کرنے کا بنیادی طریقہ ہے۔ IT Sectr کاروباری منطق کو Custom Hooks میں نکالنے اور اجزاء کو صاف رکھنے (صرف JSX + اسٹائل) کی سفارش کرتا ہے۔

اجزاء (View, Text, FlatList, ScrollView, SafeAreaView)

View — بنیادی کنٹینر (div سے مشابہ)۔ Text — متن (متن کے لیے واحد جزو)۔ TextInput — متن کا ان پٹ۔ ScrollView — اسکرول کرنے کے قابل کنٹینر۔ FlatList — بڑے ڈیٹا کے لیے ورچوئلائزڈ فہرست۔ SectionList — حصوں کے ساتھ FlatList۔ SafeAreaView — Safe Area سے خودکار پیڈنگ (نوچ، اسٹیٹس بار)۔ Pressable — TouchableOpacity کا جدید متبادل۔ useColorScheme — تاریک/روشن تھیم کا پتہ لگانا۔

FlatList اصلاح

FlatList — ورچوئلائزیشن: صرف نظر آنے والے عناصر + windowSize رینڈر ہوتے ہیں۔ اصلاح: 1) keyExtractor — منفرد کلید، 2) getItemLayout — مقررہ اونچائی (onLayout پیمائش چھوڑتا ہے)، 3) renderItem کے لیے React.memo، 4) maxToRenderPerBatch (پہلے سے طے شدہ 10)، 5) windowSize (پہلے سے طے شدہ 21)، 6) removeClippedSubviews، 7) initialNumToRender۔

React Native میں نیویگیشن

React Navigation — معیاری نیویگیشن اسٹیک۔ NativeStackNavigator — نیٹو اینیمیشن (push/pop)۔ TabNavigator — نیچے کے ٹیبز۔ DrawerNavigator — سائیڈ مینو۔ NavigationContainer — نیویگیشن کا روٹ جزو۔ Deep linking — بیرونی لنکس کے لیے لنکنگ کنفیگ۔ تصدیقی بہاؤ — مشروط نیویگیشن: isAuth ? AppStack : AuthStack۔ IT Sectr مرکزی اسکرینوں کے لیے NativeStackNavigator اور پہلی سطح کی نیویگیشن کے لیے TabNavigator تجویز کرتا ہے۔

اسٹائل (StyleSheet)

StyleSheet.create() — اسٹائل بنانا۔ تمام خصوصیات camelCase میں: backgroundColor, fontSize, marginTop۔ Flexbox — پہلے سے طے شدہ لے آؤٹ ماڈل (flexDirection: 'column')۔ کوئی CSS جھڑپ نہیں، کوئی وراثت نہیں، کوئی سلیکٹر نہیں۔ ان لائن اسٹائل — کام کرتے ہیں لیکن تجویز نہیں کیے جاتے۔ StyleSheet.compose() — اسٹائل کو ملا کر۔ Platform.select — پلیٹ فارم کے مخصوص اسٹائل: Platform.OS === 'ios' ? styles.ios : styles.android۔ SafeAreaView — سیف ایریا انسیٹس کا انتظام۔

Styled Components اور CSS-in-JS

Styled Components — React Native میں CSS-in-JS کے لیے لائبریری۔ Restyle — تھیمنگ + ریسپانسیو اسٹائل۔ NativeWind — React Native کے لیے Tailwind CSS۔ Unistyles — ایٹمک CSS کے ساتھ تیز اسٹائل۔ ڈارک موڈ — useColorScheme + متحرک اسٹائل۔ IT Sectr سادگی کے لیے StyleSheet.create اور ڈیزائن سسٹم والے پروجیکٹس کے لیے NativeWind تجویز کرتا ہے۔

اینیمیشن (Animated API)

Animated API — اعلانیہ اینیمیشن۔ Animated.Value — اینیمیشن قدر۔ Animated.timing — سادہ اینیمیشن۔ Animated.spring — اسپرنگ اینیمیشن۔ Animated.View — اینیمیشن کے قابل View۔ useNativeDriver — نیٹو تھریڈ پر اینیمیشن (transform, opacity — تعاون یافتہ)۔ Animated.loop — لوپڈ اینیمیشن۔ LayoutAnimation — لے آؤٹ تبدیلی پر خودکار اینیمیشن۔ reanimated 2/3 (لائبریری) — زیادہ کارکردگی کا متبادل۔ Metro Bundler — JavaScript بنڈلر۔ JS + اثاثوں کو بنڈل میں جمع کرتا ہے۔ Fast Refresh (Hot Reload) کو سپورٹ کرتا ہے۔ Hermes — موبائل کے لیے بہتر بنایا گیا JS انجن: تیز آغاز، کم میموری۔ RN 0.70+ سے پہلے سے طے شدہ۔

Gesture Handler اور اینیمیشنز

React Native Gesture Handler — نیٹو جیسچر پروسیسنگ۔ PanGestureHandler, PinchGestureHandler, TapGestureHandler۔ Gesture (RNGH 2.x) — اعلانیہ جیسچر API۔ Reanimated + Gesture Handler — جیسچرز کے ساتھ 60fps اینیمیشنز کے لیے مجموعہ۔ react-native-skia — پیچیدہ 2D گرافکس کے لیے GPU رینڈرنگ۔ IT Sectr Animated API سے زیادہ کارکردگی والی تمام اینیمیشنز کے لیے Reanimated 3 تجویز کرتا ہے۔

نیٹ ورکنگ (fetch, AsyncStorage, API)

fetch — بلٹ ان HTTP کلائنٹ۔ GET, POST, headers, body کو سپورٹ کرتا ہے۔ Axios — انٹرسیپٹرز کے ساتھ مقبول لائبریری۔ AsyncStorage — کلید-قدر ذخیرہ (UserDefaults سے مشابہ)۔ MMKV — WeChat کے AsyncStorage کا تیز متبادل۔ react-native-keychain — محفوظ ٹوکن ذخیرہ۔ React Query (TanStack Query) — سرور اسٹیٹ مینجمنٹ: کیشنگ، دوبارہ توثیق، پیجینیشن۔ IT Sectr API درخواستوں کے لیے React Query اور مقامی ذخیرہ کے لیے MMKV تجویز کرتا ہے۔

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules اور Turbo Modules

Native Module — JS اور نیٹو کوڈ کے درمیان پل (Android کے لیے Java/Kotlin، iOS کے لیے ObjC/Swift)۔ JS سے نیٹو APIs کو کال کرنے کی اجازت دیتا ہے۔ Turbo Modules (New Architecture) — پرانے Native Modules کا متبادل۔ ہم وقت ساز کال، Codegen کے ذریعے ٹائپنگ، کم اوور ہیڈ۔ Fabric Renderer — ہم وقت ساز لے آؤٹ کے ساتھ نیا رینڈرر۔ JSI (JavaScript Interface) — پل کے بغیر JS کی نیٹو آبجیکٹس تک براہ راست رسائی۔ IT Sectr نئے پروجیکٹس کے لیے Turbo Modules اور موجودہ پروجیکٹس کے لیے Native Modules تجویز کرتا ہے۔

// Android نیٹو ماڈیول (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

ٹیسٹنگ (Jest, React Native Testing Library)

Jest — معیاری ٹیسٹ رنر۔ describe/it/expect۔ React Native Testing Library — اجزاء کی جانچ۔ render, fireEvent, waitFor۔ screen.getByText, getByTestId — تلاش۔ userEvent — عمل کی نقل۔ Snapshot ٹیسٹ — toMatchSnapshot()۔ MSW (Mock Service Worker) — API موکنگ۔ Detox — RN کے لیے E2E ٹیسٹ (grey-box, نیٹو)۔ IT Sectr اجزاء کے لیے React Native Testing Library اور اینڈ ٹو اینڈ منظرناموں کے لیے Detox تجویز کرتا ہے۔

CodePush (App Center) — App Store/Google Play پر شائع کیے بغیر JS بنڈل کی OTA اپ ڈیٹس۔ استعمال: ہاٹ فکسز، A/B ٹیسٹ، مواد کی تبدیلیاں۔ حدود: نیٹو کوڈ تبدیل نہیں کر سکتا۔ متبادل: EAS Update (Expo), react-native-update۔ IT Sectr فوری فکسز کے لیے CodePush اور Expo پروجیکٹس کے لیے EAS Update تجویز کرتا ہے۔

Expo — React Native کے لیے فریم ورک۔ منظم ورک فلو — تمام کنفیگریشنز app.json کے ذریعے۔ Development builds — eject کے بغیر حسب ضرورت نیٹو ماڈیولز۔ Expo SDK — بلٹ ان ماڈیولز: کیمرہ، بائیو میٹرکس، نوٹیفیکیشنز۔ EAS Build — کلاؤڈ بلڈ۔ Expo Router — فائل پر مبنی روٹنگ (Next.js جیسی)۔ IT Sectr نئے پروجیکٹس کے لیے Expo اور گہری نیٹو کسٹمائزیشن والے پروجیکٹس کے لیے bare RN تجویز کرتا ہے۔