React Native: یہ کیا ہے، Bridge کیسے کام کرتا ہے اور JavaScript ماحول

React Native کیا ہے

React Native ایک فریم ورک ہے جسے Facebook ٹیم (اب Meta) نے بنایا اور 2015 میں اوپن سورس کے طور پر جاری کیا۔ ہائبرڈ طریقوں (Cordova, Ionic) کے برعکس، React Native WebView استعمال نہیں کرتا۔ اس کے بجائے، JavaScript اجزاء مقامی UI عناصر سے منسلک ہوتے ہیں: View → UIView / android.view.View، Text → UILabel / TextView، ScrollView → UIScrollView / ScrollView۔

React Native کا پہلا ورژن صرف iOS کو سپورٹ کرتا تھا۔ Android سپورٹ 2016 میں آیا۔ ورژن 0.60 (2019) نے Autolinking (مقامی انحصار کا خودکار لنکنگ) متعارف کرایا۔ React Native 0.68 (2022) نے نیا Fabric + TurboModules فن تعمیر شامل کیا۔ موجودہ مستحکم ورژن 0.74 (2024) Flexbox لے آؤٹ کے لیے Yoga 3.0 سپورٹ کے ساتھ مکمل طور پر New Architecture میں منتقل ہو گیا ہے۔

Statista 2024 کے مطابق، React Native 38% کراس پلیٹ فارم پروجیکٹس میں استعمال ہوتا ہے۔ فریم ورک Discord، Instagram، Shopify، Pinterest، Skype اور Uber Eats استعمال کرتے ہیں۔ Meta Facebook اور Instagram (2 بلین صارفین والی مرکزی موبائل ایپ) میں React Native استعمال کرتا ہے۔

React Native کی تاریخ اور ارتقاء

React Native کا اعلان جنوری 2015 میں React.js Conf میں کیا گیا تھا۔ خیال React کے اعلامیاتی نمونے کو ویب سے موبائل پلیٹ فارمز تک لانا تھا۔ ریپوزٹری میں پہلا commit 2013 میں iOS پر Facebook Groups ایپ بنانے کے لیے ایک اندرونی Facebook پروجیکٹ کے طور پر ظاہر ہوا۔

0.70 (2022) ورژن نے Hermes کو ڈیفالٹ JavaScript انجن کے طور پر متعارف کرایا۔ Hermes ایک پہلے سے مرتب کردہ (AOT) انجن ہے جو موبائل آلات کے لیے بہتر بنایا گیا ہے۔ یہ JavaScriptCore کے مقابلے میں ایپ شروع ہونے کے وقت کو 50% کم کرتا ہے اور APK سائز کو 30% کم کرتا ہے۔ Hermes ES6 اور جزوی طور پر ES2020 کو سپورٹ کرتا ہے۔

React Native اور React Web کے درمیان فرق

React Web ReactDOM کے ذریعے اجزاء کو DOM عناصر (div, span, p) میں رینڈر کرتا ہے۔ React Native پلیٹ فارم کے مقامی اجزاء میں رینڈر کرتا ہے۔ <div> کی بجائے <View>، <span> کی بجائے <Text> استعمال کریں۔ اسٹائل StyleSheet.create() کے ذریعے متعین کیے جاتے ہیں، جو پلیٹ فارم کے CSS خصوصیات میں ترجمہ ہوتا ہے۔ Flexbox Yoga انجن کے ذریعے ڈیفالٹ طور پر فعال ہے۔

React Native میں نیویگیشن ویب سے مختلف ہے۔ react-router-dom کے بجائے React Navigation استعمال ہوتا ہے — Stack، Tab اور Drawer نیویگیٹرز کو سپورٹ کرنے والی ایک مقامی لائبریری۔ React Navigation 6.x مقامی اینیمیشن (useNativeDriver) اور Deep Links انٹیگریشن استعمال کرتا ہے۔ iOS UINavigationController اور Android Fragment کے ساتھ مقامی اسکرین نیویگیشن کے لیے Wix کی react-native-navigation لائبریری استعمال ہوتی ہے۔

React Native کا فن تعمیر

React Native کا فن تعمیر روایتی طور پر Bridge (JavaScript ماحول اور مقامی کوڈ کے درمیان ایک غیر متزامن JSON چینل) کے گرد تعمیر کیا گیا تھا۔ ورژن 0.68 سے، Meta نے New Architecture متعارف کرایا، جو Bridge کو JSI (JavaScript Interface) اور Fabric سے بدل دیتا ہے۔ آئیے دونوں ماڈلز پر نظر ڈالتے ہیں۔

Bridge اور Fabric

Bridge ایک سیریلائزڈ JSON پروٹوکول ہے جو متعدد تھریڈز پر چلتا ہے: JS Thread (React کوڈ کی تشریح)، Main Thread (UI) اور Native Modules Thread (API)۔ JS اور مقامی کوڈ کے درمیان ہر تعامل آبجیکٹ سیریلائزیشن اور ڈی سیریلائزیشن سے گزرتا ہے، جو بار بار کال کرنے پر تاخیر پیدا کرتا ہے۔ 1000 آئٹمز کی فہرست اسکرول کرتے وقت، Bridge فی سیکنڈ 10,000 JSON پیغامات پیدا کرتا ہے۔

Fabric React Native میں ایک نیا رینڈرنگ سسٹم ہے۔ Bridge کے بجائے، Fabric JSI کے ذریعے UI تھریڈ کے ساتھ ہم آہنگ ہونے والا C++ شیڈو ٹری (Shadow Tree) استعمال کرتا ہے۔ یہ JSON سیریلائزیشن کو ختم کرتا ہے: مقامی C++ کوڈ براہ راست JavaScript ماحول میں فنکشنز کال کرتا ہے اور اس کے برعکس۔ Fabric رینڈرنگ لیٹنسی کو 16 ms (Bridge) سے 2–4 ms تک کم کر دیتا ہے۔

TurboModules New Architecture کا دوسرا حصہ ہے۔ پرانے ماڈل میں، تمام مقامی ماڈیول ایپ شروع ہونے پر لوڈ ہوتے تھے۔ TurboModules ماڈیولز کو سست لوڈنگ (lazy loading) سے لوڈ کرتا ہے — صرف اس وقت جب JS کوڈ پہلی بار ان کی درخواست کرتا ہے۔ یہ 20+ مقامی ماڈیول والی ایپس میں کولڈ اسٹارٹ وقت کو 40% کم کرتا ہے۔

React Native ایپ کی مثال

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

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

مقامی ماڈیولز

مقامی ماڈیولز JavaScript سے پلیٹ فارم APIs کال کرنے کے لیے ایک میکانزم ہے۔ اگر فعالیت معیاری React Native اجزاء (کیمرہ، Bluetooth، بائیو میٹرکس) میں شامل نہیں ہے تو، ڈیولپر Swift/Kotlin میں ایک ماڈیول لکھتا ہے اور اسے RCTBridgeModule یا TurboModule کے ذریعے رجسٹر کرتا ہے۔ مقامی فنکشن JS سے NativeModules.CameraModule.takePhoto() کے ذریعے کال کیا جاتا ہے۔

React Native ایکسلرومیٹر (react-native-sensors)، جیولوکیشن (@react-native-community/geolocation)، بائیو میٹرکس (react-native-biometrics) اور لوکل نوٹیفکیشنز (@notifee/react-native) تک رسائی کے لیے تیار مقامی ماڈیولز فراہم کرتا ہے۔ کسٹم منظرناموں کے لیے، Expo Expo Modules API پیش کرتا ہے — Xcode یا Android Studio کے بغیر مقامی ماڈیول بنانے کے لیے ایک آسان انٹرفیس۔

React Native کے فوائد

بڑی کمیونٹی — React Native کی کراس پلیٹ فارم فریم ورکس میں سب سے بڑی کمیونٹی ہے۔ GitHub پر پروجیکٹ کے 117,000+ ستارے اور 1800+ شراکت دار ہیں۔ npm ہفتہ وار 3 ملین+ بار react-native ڈاؤن لوڈ کرتا ہے۔ React Native کے سوالات Stack Overflow کے موبائل ڈیولپمنٹ سیکشن میں تمام سوالات کا 5% بنتے ہیں۔

JavaScript ایکو سسٹم — React ڈیولپر ویب پر استعمال ہونے والے اوزار استعمال کرتے ہیں: npm، Babel، ESLint، Prettier، Jest، TypeScript۔ کاروباری منطق ویب ورژن (React) اور موبائل ایپ (React Native) کے درمیان دوبارہ استعمال کی جا سکتی ہے۔ Redux، Zustand، React Query اور React Hook Form جیسی لائبریریاں تبدیلی کے بغیر دونوں پلیٹ فارمز پر کام کرتی ہیں۔

Expo ایک SDK اور ٹول سیٹ ہے جو React Native ڈیولپمنٹ کو آسان بناتا ہے۔ Expo تیار ماڈیولز (کیمرہ، نوٹیفکیشنز، نقشے، OAuth)، کلاؤڈ بلڈ (EAS Build) اور OTA اپ ڈیٹس (EAS Update) فراہم کرتا ہے۔ Expo Go Xcode یا Android Studio کے بغیر فزیکل ڈیوائس پر ایپ چلانے کی اجازت دیتا ہے۔ Expo 2024 کے اعداد و شمار کے مطابق، 70% نئے React Native پروجیکٹس Expo استعمال کرتے ہیں۔

OTA اپ ڈیٹس — Expo Update اور CodePush (Microsoft) کے ذریعے دستیاب ایک خصوصیت۔ ڈیولپرز App Store یا Google Play کے جائزے کے بغیر براہ راست صارفین کو JavaScript بنڈل اپ ڈیٹس بھیج سکتے ہیں۔ یہ اہم بگ فکسز کو 2–5 دن (جائزے کے انتظار) سے 1–2 گھنٹے تک تیز کرتا ہے۔

TypeScript سپورٹ React Native 0.71 سے ڈیفالٹ طور پر شامل ہے۔ پروجیکٹ ٹیمپلیٹ میں tsconfig.json، تمام اجزاء کے لیے اقسام اور سخت موڈ سپورٹ شامل ہے۔ Flow (Facebook کا سٹیٹک ٹائپنگ) بھی سپورٹ ہے، لیکن Meta سرکاری طور پر TypeScript کی تجویز کرتا ہے۔ State of React Native 2024 سروے کے مطابق، TypeScript ٹیمپلیٹ نئے پروجیکٹس کا 85% بنتا ہے۔

ایکو سسٹم اور مشہور لائبریریاں

npm React Native کے لیے بنیادی پیکیج رجسٹری ہے۔ لائبریری کی تلاش react-native کلیدی لفظ سے فلٹر کی جاتی ہے۔ تنصیب کے لیے npm install یا yarn add استعمال ہوتا ہے۔ React Native CLI مقامی انحصار کو خودکار طور پر لنک کرتا ہے (ورژن 0.60 سے)۔ Expo پروجیکٹس کے لیے، تنصیب expo install کے ذریعے منظم کی جاتی ہے، جو مطابقت پذیر لائبریری ورژن کا انتخاب کرتا ہے۔

اہم لائبریریاں

@react-navigation/native — React Native میں نیویگیشن کے لیے ڈی فیکٹو معیار ہے۔ لائبریری میں Stack Navigator (متحرک ٹرانزیشن)، Tab Navigator (iOS/Android کے لیے نیچے کا مینو)، Drawer Navigator (سائیڈ مینو) اور Material Top Tab شامل ہیں۔ React Navigation 7.x (2024) نے سٹیٹک روٹ کنفیگریشن اور useSyncExternalStore کے ساتھ مکمل React 18 سپورٹ متعارف کرایا۔

react-native-reanimated — اعلیٰ کارکردگی والی اینیمیشنز کے لیے ایک لائبریری۔ Reanimated 3.x JS تھریڈ کو نظرانداز کرتے ہوئے UI تھریڈ (worklet) میں اینیمیشنز چلاتا ہے۔ یہ 100+ عناصر کو اینیمیٹ کرتے ہوئے بھی 60 FPS کی ضمانت دیتا ہے۔ useSharedValue، useAnimatedStyle اور withSpring معیاری لائبریری کے Animated API کی جگہ لے لیتے ہیں۔ Reanimated react-native-gesture-handler کے ذریعے ٹچ جیسچرز کو ہینڈل کرتا ہے۔

@tanstack/react-query — سرور اسٹیٹ مینجمنٹ کے لیے ایک لائبریری۔ React Query API ردعمل کو کیش کرتا ہے، نیٹ ورک تبدیل ہونے پر خود بخود ڈیٹا دوبارہ لاتا ہے (refetchOnReconnect) اور useInfiniteQuery کے ساتھ پیجینیشن کو سپورٹ کرتا ہے۔ ورژن 5.x میں UX کے لیے پرامید اپ ڈیٹس شامل ہیں — انٹرفیس سرور کا جواب حاصل کرنے سے پہلے اپ ڈیٹ ہوتا ہے، پھر ایڈجسٹ ہوتا ہے۔