React Native میں Native Module — یہ کیا ہے، کیسے بنائیں اور ضم کریں

مصنف: IT Sectr اشاعت: 2026-06-03 مطالعے کا وقت: 9 منٹ

Native Module ایک Java یا Objective-C کلاس ہے جو React Native میں JavaScript سے پلیٹ فارم کے مقامی APIs تک رسائی فراہم کرتا ہے۔ ہر ماڈیول Bridge میں رجسٹر ہوتا ہے اور ان طریقوں کو ایکسپورٹ کرتا ہے جنہیں JS کوڈ سے عام افعال کی طرح بلایا جا سکتا ہے۔ Meta، 2024 کے مطابق، Native Module React Native ایپلیکیشنز میں پلیٹ فارم کوڈ کو ضم کرنے کا بنیادی طریقہ ہے۔

اہم نکات

  • Native Module — JavaScript اور iOS یا Android کے مقامی کوڈ کے درمیان ایک پل۔
  • رجسٹریشن — ماڈیول iOS تشریحات (RCT_EXPORT_MODULE) یا Android (@ReactMethod) کے ذریعے اعلان کیا جاتا ہے۔
  • ڈیٹا کی اقسام — ابتدائی اقسام، سٹرنگز، ارے، لغات اور Promise معاونت یافتہ ہیں۔
  • استعمال — JS سے ماڈیول NativeModules.ماڈیول نام کے ذریعے قابل رسائی ہے۔
  • نیا فن تعمیر — React Native 0.76+ میں Native Module JSI کے ذریعے Turbo Module کے طور پر کام کر سکتا ہے۔

Native Module کیا ہے؟

Native Module React Native کا ایک آرکیٹیکچرل عنصر ہے جو پلیٹ فارم کی زبان (iOS کے لیے Objective-C/Swift، Android کے لیے Java/Kotlin) میں کوڈ پر عمل درآمد اور نتیجہ JavaScript کو واپس کرنے کی اجازت دیتا ہے۔ Native Module کے بغیر ڈیوائس کی مقامی صلاحیتوں — کیمرہ، GPS، ایکسلرومیٹر، فائل سسٹم یا Bluetooth تک رسائی ممکن نہیں ہے۔

React Native بلٹ ان Native Modules کے ایک سیٹ کے ساتھ آتا ہے: CameraRoll، AsyncStorage، Geolocation، NetInfo اور دیگر۔ تاہم، مخصوص کاموں کے لیے — تیسرے فریق کے SDK کا انضمام، ہارڈویئر سینسرز کے ساتھ کام یا پس منظر کے عمل — ڈویلپر حسب ضرورت ماڈیول بناتا ہے۔ State of React Native 2024 سروے کے مطابق، 67% ڈویلپر اپنے پروجیکٹس میں کم از کم ایک کسٹم Native Module استعمال کرتے ہیں۔

Native Module کا فن تعمیر React Native کے ورژن پر منحصر ہے۔ کلاسک فن تعمیر (React Native 0.72 اور پرانے) میں ماڈیول Bridge کے ذریعے جڑتا ہے اور JSON سیریلائزیشن کے ذریعے JS کے ساتھ غیر متزامن طور پر بات چیت کرتا ہے۔ نئے فن تعمیر (React Native 0.76+) میں ماڈیول سیریلائزیشن کے بغیر ہم آہنگ رسائی کے لیے JSI استعمال کرتے ہوئے Turbo Module کے طور پر کام کر سکتا ہے۔

iOS کے لیے Native Module بنانا

iOS کے لیے Native Module بنانا ایک Objective-C کلاس کے اعلان سے شروع ہوتا ہے جو RCTBridgeModule پروٹوکول کو لاگو کرتی ہے۔ RCT_EXPORT_MODULE میکرو ماڈیول کو Bridge میں رجسٹر کرتا ہے، اور RCT_EXPORT_METHOD JavaScript سے دستیاب ایک طریقہ ایکسپورٹ کرتا ہے۔

objective-c
// ImageCompressor.m — iOS کے لیے Native Module
@interface ImageCompressor () RCT_EXPORT_MODULE()
@end

@implementation ImageCompressor

RCT_EXPORT_METHOD(compressImage:(NSString *)imagePath
                  quality:(NSNumber *)quality
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
    UIImage *image = [UIImage imageWithContentsOfFile:imagePath];
    NSData *compressedData = [UIImageJPEGRepresentation(image, quality.floatValue)];
    NSString *outputPath = [NSTemporaryDirectory() stringByAppendingPathComponent:@"compressed.jpg"];
    [compressedData writeToFile:outputPath atomically:YES];
    resolve(outputPath);
}

@end

compressImage طریقہ تصویر کا راستہ اور کمپریشن کوالٹی (0.0–1.0) لیتا ہے، مقامی طرف ڈیٹا پر کارروائی کرتا ہے اور کمپریسڈ فائل کا راستہ واپس کرتا ہے۔ اہم فائدہ یہ ہے کہ کمپریشن مقامی کوڈ کے ذریعے انجام دیا جاتا ہے، جو مساوی JavaScript آپریشن کے مقابلے میں نمایاں طور پر تیز اور میموری کے لحاظ سے موثر ہے۔

Swift ماڈیولز کے لیے، کلاس اور طریقوں سے پہلے @objc تشریح استعمال کی جاتی ہے تاکہ وہ Objective-C رن ٹائم کے لیے دستیاب ہوں جس کے ساتھ Bridge کام کرتا ہے۔ کلاس کو NSObject سے وراثت حاصل کرنی چاہیے اور RCTBridgeModule کو لاگو کرنا چاہیے۔

swift
// ImageCompressor.swift — Swift مقامی ماڈیول
@objc(ImageCompressor)
class ImageCompressor: NSObject {

    @objc
    func compressImage(
        _ imagePath: String,
        quality: Float,
        resolver: @escaping RCTPromiseResolveBlock,
        rejecter: @escaping RCTPromiseRejectBlock
    ) {
        guard let image = UIImage(contentsOfFile: imagePath) else {
            rejecter("FILE_ERROR", "Cannot load image", nil)
            return
        }
        guard let data = image.jpegData(compressionQuality: CGFloat(quality)) else {
            rejecter("COMPRESS_ERROR", "Compression failed", nil)
            return
        }
        let outputPath = NSTemporaryDirectory() + "compressed.jpg"
        try? data.write(to: URL(fileURLWithPath: outputPath))
        resolver(outputPath)
    }
}

Android کے لیے Native Module بنانا

Android پر، Native Module ReactContextBaseJavaModule کو بڑھانے والی Java کلاس کے طور پر بنایا جاتا ہے۔ @ReactMethod تشریح طریقہ کو Bridge میں ایکسپورٹ کرتی ہے۔ نتائج واپس کرنے کے لیے com.facebook.react.bridge سے Promise انٹرفیس استعمال کیا جاتا ہے۔

java
// ImageCompressorModule.java — Android Native Module
public class ImageCompressorModule
    extends ReactContextBaseJavaModule {

    @Override
    public String getName() {
        return "ImageCompressor";
    }

    @ReactMethod
    public void compressImage(
            String imagePath,
            Float quality,
            Promise promise) {
        try {
            Bitmap bitmap = BitmapFactory.decodeFile(imagePath);
            File outputFile = new File(
                ReactNative.getApplicationContext()
                    .getCacheDir(), "compressed.jpg");
            FileOutputStream fos = new FileOutputStream(outputFile);
            bitmap.compress(
                Bitmap.CompressFormat.JPEG,
                (int)(quality * 100), fos);
            fos.close();
            promise.resolve(outputFile.getAbsolutePath());
        } catch (Exception e) {
            promise.reject("COMPRESS_ERROR", e.getMessage());
        }
    }
}

getName() طریقہ ماڈیول کا نام واپس کرتا ہے جس کے تحت یہ JavaScript سے قابل رسائی ہوگا۔ اوپر دی گئی مثال میں، ماڈیول ImageCompressor کے طور پر رجسٹر کیا گیا ہے۔ @ReactMethod تشریح Bridge کو بتاتی ہے کہ طریقہ کو ایکسپورٹ کیا جانا چاہیے۔ اہم: طریقے void ہونے چاہئیں اور صرف Bridge کے معاون اقسام کو قبول کریں: String، Boolean، Integer، Double، ReadableArray، ReadableMap، Promise۔

ماڈیول کلاس بنانے کے بعد، اسے ایپلیکیشن پیکیج میں رجسٹر کرنا ضروری ہے۔ اس کے لیے، ReactPackage کو لاگو کرنے والی ایک کلاس بنائی جاتی ہے اور createNativeModules طریقہ میں ماڈیول کی فہرست میں شامل کی جاتی ہے۔

java
// ImageCompressorPackage.java — ماڈیول رجسٹریشن
public class ImageCompressorPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        return Arrays.asList(
            new ImageCompressorModule(reactContext)
        );
    }

    @Override
    public List<ViewManager> createViewManagers(
            ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

Native Module کا رجسٹریشن اور استعمال

دونوں پلیٹ فارمز کے لیے ماڈیول بنانے کے بعد، انہیں React Native میں رجسٹر کرنے کی ضرورت ہے۔ Android کے لیے، پیکیج MainApplication.java میں getPackages() طریقہ میں شامل کیا جاتا ہے۔ iOS کے لیے، ماڈیول خود بخود RCT_EXPORT_MODULE میکرو کے ذریعے رجسٹر ہوتا ہے، لیکن AppDelegate.mm میں دستی رجسٹریشن بھی استعمال کی جا سکتی ہے۔

java
// MainApplication.java — React Native میں پیکیج شامل کرنا
import com.yourapp.nativemodules.ImageCompressorPackage;

public class MainApplication extends Application
    implements ReactApplication {

    private final ReactNativeHost mReactNativeHost =
        new ReactNativeHost(this) {

        @Override
        protected List<ReactPackage> getPackages() {
            List<ReactPackage> packages =
                new PackageList(this).getPackages();
            packages.add(new ImageCompressorPackage());
            return packages;
        }
    };
}

رجسٹریشن کے بعد، ماڈیول JavaScript میں NativeModules کے ذریعے دستیاب ہو جاتا ہے۔ React Native خود بخود Android کے لیے getName() یا iOS کے لیے RCT_EXPORT_MODULE میں متعین کردہ ماڈیول نام استعمال کرتا ہے۔

js
// JavaScript سے Native Module کا استعمال
import { NativeModules } from 'react-native';
import { Platform } from 'react-native';

const ImageCompressor = NativeModules.ImageCompressor;

async function compressPhoto(uri: string) {
  try {
    const result = await ImageCompressor.compressImage(
      uri.replace('file://', ''), 0.8
    );
    console.log('کمپریسڈ:', result);
    return result;
  } catch (error) {
    console.error('کمپریشن ناکام:', error);
    throw error;
  }
}

Native Module بمقابلہ Turbo Module: موازنہ

کلاسک Native Module کا Turbo Module سے موازنہ یہ سمجھنے میں مدد کرتا ہے کہ نئے پروجیکٹ کے لیے کون سا نقطہ نظر منتخب کرنا ہے۔ دونوں میکانزم مقامی کوڈ تک رسائی فراہم کرتے ہیں، لیکن فن تعمیر اور کارکردگی میں بنیادی طور پر مختلف ہیں۔

خصوصیتNative Module (Bridge)Turbo Module (JSI)
مواصلاتJSON کے ذریعے غیر متزامنJSI کے ذریعے ہم آہنگ
سیریلائزیشنہر کال پر JSONڈیٹا کاپی کیے بغیر
ٹائپنگدستی، جنریشن کے بغیرCodegen کے ذریعے خودکار
لوڈنگایپلیکیشن ابتدا پرسست لوڈ (lazy load)
مطابقتتمام React Native ورژنReact Native 0.73+

React Native 0.72 اور پرانے ورژن پر موجودہ پروجیکٹس کے لیے، کلاسک Native Modules بنیادی انتخاب رہتے ہیں۔ نئے پروجیکٹس کے لیے Turbo Module تجویز کیا جاتا ہے، خاص طور پر اگر بار بار مقامی طریقہ کالز کے لیے اعلی کارکردگی کی ضرورت ہو۔ React Native کی بتدریج اپ ڈیٹ کے ساتھ، کمیونٹی نئے فن تعمیر کی طرف مکمل منتقلی کی طرف بڑھ رہی ہے۔

اکثر پوچھے گئے سوالات

کیا Native Module میں Promise کی بجائے callback پاس کیا جا سکتا ہے؟

ہاں، Bridge callback کو سپورٹ کرتا ہے۔ Promise کی بجائے iOS میں RCTResponseSenderBlock callback فنکشنز اور Android میں Callback استعمال کیا جا سکتا ہے۔ تاہم، Promise کو جدید معیار سمجھا جاتا ہے اور نئے ماڈیولز کے لیے تجویز کیا جاتا ہے۔

Xcode یا Android Studio میں Native Module کو کیسے ڈیبگ کریں؟

Native Module عام مقامی کوڈ کی طرح ڈیبگ کیا جاتا ہے — Xcode یا Android Studio میں بریک پوائنٹس سیٹ کریں۔ iOS کے لیے، React Native کے ساتھ بلڈ اسکیم استعمال کریں؛ Android کے لیے، Debug کنفیگریشن استعمال کریں۔ داخلے کا نقطہ JS سے بلائے گئے طریقے ہیں۔

Native Module کون سی ڈیٹا اقسام کو سپورٹ نہیں کرتا؟

Bridge کے ذریعے Native Module بائنری ڈیٹا (NSData/byte[])، کسٹم آبجیکٹ اور فنکشنز کو سپورٹ نہیں کرتا۔ تصاویر کے لیے، فائل پاتھ یا base64 سٹرنگ استعمال کریں۔ JSI کے ذریعے Turbo Module ان میں سے کچھ حدود کو ختم کرتا ہے۔

کیا React Native کو اپ ڈیٹ کرتے وقت Native Module کو دوبارہ لکھنا ضروری ہے؟

عام طور پر نہیں — Native Module API مستحکم اور پسماندہ مطابقت رکھتا ہے۔ نئے فن تعمیر (Turbo Module) میں منتقلی کے دوران، ماڈیول ڈیکوریٹرز کے ذریعے ڈھال لیا جاتا ہے، لیکن موجودہ کوڈ کام کرتا رہتا ہے۔

Native Module سے JavaScript میں ایونٹ کیسے بھیجیں؟

iOS میں RCTEventEmitter یا Android میں DeviceEventEmitter استعمال کریں۔ ماڈیول ایک ایونٹ بھیجتا ہے، اور JS سائیڈ react-native سے NativeEventEmitter کے ذریعے سبسکرائب کرتی ہے۔ یہ سٹریمنگ ڈیٹا اور سینسر ایونٹس کے لیے مفید ہے۔

خلاصہ

  • Native Module — ایک Java/Objective-C کلاس جو React Native میں JavaScript سے مقامی APIs تک رسائی فراہم کرتا ہے۔
  • رجسٹریشن — iOS RCT_EXPORT_MODULE استعمال کرتا ہے، Android @ReactMethod کے ساتھ ReactContextBaseJavaModule استعمال کرتا ہے۔
  • طلب — JS سے ماڈیول NativeModules.Module کے ذریعے قابل رسائی ہے اور Promise اور callback کو سپورٹ کرتا ہے۔
  • ڈیٹا اقسام — Bridge صرف JSON مطابقت پذیر اقسام منتقل کرتا ہے: سٹرنگز، نمبرز، ارے، لغات۔
  • کارکردگی — کلاسک Native Module غیر متزامن پن اور سیریلائزیشن کی وجہ سے Turbo Module سے کمتر ہے۔
  • منتقلی — React Native 0.76+ میں اپ گریڈ کرتے وقت ماڈیول منطق کو دوبارہ لکھے بغیر Turbo Module کے طور پر کام کر سکتا ہے۔
  • استعمال — Native Module کیمرہ، Bluetooth، فائل سسٹم اور SDK انضمام کے لیے ناگزیر ہے۔

ہم ایک موبائل ایپلیکیشن ٹرنکی تیار کریں گے

IT Sectr 2017 سے اسٹارٹ اپس اور کاروبار کے لیے iOS اور Android ایپلیکیشنز بناتا ہے۔ ہم آپ کو مشورہ دیں گے اور بہترین حل تجویز کریں گے۔

پروجیکٹ پر بحث کریں

مزید پڑھیں