---
title: React Native कैप्चर
description: Human Plugin create से लौटे लिंक का उपयोग करके, native module के साथ React Native ऐप में Journey flow का कैप्चर चलाएं।
canonical: https://developer.unico.io/hi/human-plugin/integrations/react-native
locale: hi
generated_by: markdown-export
---

# React Native कैप्चर

native module के साथ React Native ऐप से कैप्चर खोलें।

आपका बैक-एंड Human Plugin में Journey flow और ऐसे `callbackUri` के साथ process बनाता है जो आपके ऐप की URL scheme का उपयोग करता है। एक native module जवाब के `link` को iOS पर `ASWebAuthenticationSession` में और Android पर Custom Tabs में खोलता है। कैप्चर समाप्त होने पर module अपना promise resolve करता है और ऐप आगे का काम संभाल लेता है।

create के जवाब से Human Plugin का `id` रखें। आपका बैक-एंड उसी से नतीजा पढ़ता है।

## पूर्वापेक्षाएं

- React Native 0.71 या बाद का
- iOS के लिए Xcode 14 या बाद का
- Android के लिए Android Studio
- आपके ऐप की अपनी यूनीक URL scheme, जैसे `myapp`

## 1. अपनी scheme के साथ process बनाएं

आपका बैक-एंड scheme को `callbackUri` के रूप में भेजता है:

```json
{
  "flow": "humantoken",
  "clientId": "client-a",
  "correlationId": "order-1001",
  "credential": { "type": "DUI_TYPE_NG_BVN", "value": "<document number>" },
  "callbackUri": "myapp://callback"
}
```

और `id` तथा `link` ऐप को लौटाता है।

## 2. TypeScript ब्रिज बनाएं

```typescript
// src/modules/CaptureModule.ts
import { NativeModules } from 'react-native';

const { CaptureModule } = NativeModules;

if (!CaptureModule) {
  throw new Error('CaptureModule not found. Make sure the native module is linked correctly.');
}

export const Capture = {
  openSession: (url: string): Promise<string> => CaptureModule.openSession(url),
};
```

## 3. iOS module इम्प्लीमेंट करें

### Objective-C ब्रिज

```objc
// ios/CaptureModule.m
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(CaptureModule, NSObject)
RCT_EXTERN_METHOD(openSession:(NSString *)url
                  resolve:(RCTPromiseResolveBlock)resolve
                  reject:(RCTPromiseRejectBlock)reject)
@end
```

### Swift इम्प्लीमेंटेशन

```swift
// ios/CaptureModule.swift
import AuthenticationServices

@objc(CaptureModule)
class CaptureModule: NSObject, ASWebAuthenticationPresentationContextProviding {

    private var session: ASWebAuthenticationSession?

    @objc func openSession(_ url: String,
                           resolve: @escaping RCTPromiseResolveBlock,
                           reject: @escaping RCTPromiseRejectBlock) {
        guard let sessionURL = URL(string: url) else {
            reject("INVALID_URL", "Invalid URL", nil)
            return
        }
        DispatchQueue.main.async {
            let newSession = ASWebAuthenticationSession(
                url: sessionURL,
                callbackURLScheme: "myapp"
            ) { callbackURL, error in
                self.session = nil
                if let callbackURL = callbackURL {
                    resolve(callbackURL.absoluteString)
                } else {
                    reject("SESSION_ERROR", error?.localizedDescription ?? "Session cancelled", error)
                }
            }
            newSession.presentationContextProvider = self
            newSession.prefersEphemeralWebBrowserSession = true
            newSession.start()
            self.session = newSession
        }
    }

    func presentationAnchor(for session: ASWebAuthenticationSession) -> ASPresentationAnchor {
        guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
              let window = windowScene.windows.first else {
            return ASPresentationAnchor()
        }
        return window
    }

    @objc static func requiresMainQueueSetup() -> Bool { return true }
}
```

## 4. Android module इम्प्लीमेंट करें

`android/app/build.gradle` में dependency जोड़ें:

```groovy
implementation("androidx.browser:browser:1.5.0")
```

```kotlin
// android/app/src/main/java/<your.package>/CaptureModule.kt
package com.yourapp

import android.net.Uri
import androidx.browser.customtabs.CustomTabsIntent
import com.facebook.react.bridge.*

class CaptureModule(private val reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    private var pendingPromise: Promise? = null

    override fun getName() = "CaptureModule"

    @ReactMethod
    fun openSession(url: String, promise: Promise) {
        pendingPromise = promise
        currentActivity?.runOnUiThread {
            CustomTabsIntent.Builder().build()
                .launchUrl(currentActivity!!, Uri.parse(url))
        } ?: promise.reject("NO_ACTIVITY", "No current activity")
    }

    fun handleRedirectUrl(uri: Uri) {
        if (uri.scheme == "myapp") {
            pendingPromise?.resolve(uri.toString())
            pendingPromise = null
        }
    }
}
```

```kotlin
// CapturePackage.kt
package com.yourapp

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager

class CapturePackage : ReactPackage {
    override fun createNativeModules(ctx: ReactApplicationContext): List<NativeModule> =
        listOf(CaptureModule(ctx))
    override fun createViewManagers(ctx: ReactApplicationContext): List<ViewManager<*, *>> =
        emptyList()
}
```

इसे `MainApplication.kt` में रजिस्टर करें:

```kotlin
override fun getPackages(): List<ReactPackage> =
    PackageList(this).packages.apply {
        add(CapturePackage())
    }
```

वापसी को `MainActivity.kt` में संभालें:

```kotlin
override fun onNewIntent(intent: Intent) {
    super.onNewIntent(intent)
    intent.data?.let { uri ->
        if (uri.scheme == "myapp") {
            val module = reactInstanceManager
                .currentReactContext
                ?.getNativeModule(CaptureModule::class.java)
            module?.handleRedirectUrl(uri)
        }
    }
}
```

## 5. Android पर अपनी scheme रजिस्टर करें

`AndroidManifest.xml` में:

```xml
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-permission android:name="android.permission.CAMERA" />

<activity android:name=".MainActivity" ...>
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="myapp" android:host="callback" />
    </intent-filter>
</activity>
```

## 6. कैप्चर शुरू करें

```typescript
import { Capture } from './modules/CaptureModule';

try {
  await Capture.openSession(link);
  // The capture ended. Ask your back-end to read the outcome
  // with GET /v1/processes/{id}, using the Human Plugin id.
} catch {
  // The person closed the session.
}
```

## सारांश

| फ़ाइल | उद्देश्य |
|---|---|
| `src/modules/CaptureModule.ts` | TypeScript ब्रिज |
| `ios/CaptureModule.m` | Objective-C डिक्लेरेशन |
| `ios/CaptureModule.swift` | iOS: `ASWebAuthenticationSession` |
| `android/.../CaptureModule.kt` | Android: Custom Tabs |
| `android/.../CapturePackage.kt` | Package रजिस्ट्रेशन |
| `android/.../MainApplication.kt` | Package जोड़ता है |
| `android/.../MainActivity.kt` | वापसी को संभालता है |
| `AndroidManifest.xml` | Intent filter |