KyvShield SDK

<?php

require_once 'vendor/autoload.php';

use KyvShield\KyvShield;
use KyvShield\VerifyOptions;

$client = new KyvShield('YOUR_API_KEY', 'https://kyvshield-naruto.innolinkcloud.com');

// ── Get available challenges per mode ─────────────────────────────────
$challenges = $client->getChallenges();
$docMinimal = $challenges->getChallenges('document', 'minimal');  // ['center_document']

// ── Verify recto + verso (file paths) ────────────────────────────────
$result = $client->verify(new VerifyOptions(
    steps:             ['recto', 'verso'],
    target:            'SN-CIN',
    language:          'fr',
    challengeMode:     'minimal',
    stepChallengeModes:['recto' => 'minimal', 'verso' => 'minimal'],
    images: [
        'recto_center_document' => '/path/to/cin_recto.jpg',  // file path
        'verso_center_document' => '/path/to/cin_verso.jpg',  // file path
    ],
));

echo $result->sessionId;          // "468d970da539..."
echo $result->overallStatus;       // "pass" | "reject"
echo $result->overallConfidence;   // 0.95

foreach ($result->steps as $step) {
    echo "{$step->stepType}: {$step->liveness->score}\n";
    foreach ($step->extraction ?? [] as $f)
        echo "  {$f->label}: {$f->value}\n";
}

// ── Images can also be: URL, base64, data URI ────────────────────────
$result2 = $client->verify(new VerifyOptions(
    steps: ['recto'], target: 'SN-CIN', challengeMode: 'minimal',
    images: [
        'recto_center_document' => 'https://example.com/recto.jpg',         // URL
        // or: base64_encode(file_get_contents('./recto.jpg'))            // base64
        // or: 'data:image/jpeg;base64,' . base64_encode($bytes)          // data URI
    ],
));

// ── Batch verification (up to 10 concurrent) ─────────────────────────
$batch = $client->verifyBatch([
    new VerifyOptions(steps: ['recto'], target: 'SN-CIN', challengeMode: 'minimal',
        images: ['recto_center_document' => '/batch/01.jpg']),
    new VerifyOptions(steps: ['recto'], target: 'SN-CIN', challengeMode: 'minimal',
        images: ['recto_center_document' => '/batch/02.jpg']),
]);

// ── Verify webhook signature ─────────────────────────────────────────
$isValid = KyvShield::verifyWebhookSignature(
    file_get_contents('php://input'),
    'YOUR_API_KEY',
    $_SERVER['HTTP_X_KYVSHIELD_SIGNATURE'],
);

import sn.innolink.kyvshield.KyvShield;
import sn.innolink.kyvshield.model.*;
import java.nio.file.Files;
import java.nio.file.Paths;

public class Main {
    public static void main(String[] args) throws Exception {
        KyvShield client = new KyvShield("YOUR_API_KEY", "https://kyvshield-naruto.innolinkcloud.com");

        // ── Verify recto + verso (file paths) ─────────────────────────
        KycResponse result = client.verify(
            new VerifyOptions.Builder()
                .steps(Step.RECTO, Step.VERSO)
                .target("SN-CIN")
                .language("fr")
                .challengeMode(ChallengeMode.MINIMAL)
                .rectoChallengeMode(ChallengeMode.MINIMAL)
                .versoChallengeMode(ChallengeMode.MINIMAL)
                .addImage("recto_center_document", "./images/cin_recto.jpg")   // file path
                .addImage("verso_center_document", "./images/cin_verso.jpg")   // file path
                .build()
        );

        System.out.println(result.getSessionId());        // "468d970da539..."
        System.out.println(result.getOverallStatus());     // PASS | REJECT
        System.out.printf("confidence: %.4f%n", result.getOverallConfidence());

        for (StepResult step : result.getSteps()) {
            System.out.printf("%s: score=%.4f%n", step.getStepType(), step.getLiveness().getScore());
            if (step.getExtraction() != null)
                step.getExtraction().forEach(f ->
                    System.out.printf("  %s: %s%n", f.getLabel(), f.getValue()));
        }

        // ── With raw bytes ────────────────────────────────────────────
        byte[] rectoBytes = Files.readAllBytes(Paths.get("./recto.jpg"));
        KycResponse result2 = client.verify(
            new VerifyOptions.Builder()
                .steps(Step.RECTO).target("SN-CIN")
                .challengeMode(ChallengeMode.MINIMAL)
                .addImageBytes("recto_center_document", rectoBytes)  // byte[]
                .build()
        );

        // ── Batch (up to 10 concurrent) ───────────────────────────────
        var batch = client.verifyBatch(java.util.List.of(
            new VerifyOptions.Builder().steps(Step.RECTO).target("SN-CIN")
                .challengeMode(ChallengeMode.MINIMAL)
                .addImage("recto_center_document", "./batch/01.jpg").build(),
            new VerifyOptions.Builder().steps(Step.RECTO).target("SN-CIN")
                .challengeMode(ChallengeMode.MINIMAL)
                .addImage("recto_center_document", "./batch/02.jpg").build()
        ));

        // ── Webhook signature verification ────────────────────────────
        boolean valid = KyvShield.verifyWebhookSignature(rawBody, "YOUR_API_KEY", sigHeader);
    }
}

import sn.innolink.kyvshield.KyvShield
import sn.innolink.kyvshield.model.*
import java.io.File

fun main() {
    val client = KyvShield("YOUR_API_KEY", "https://kyvshield-naruto.innolinkcloud.com")

    // ── Verify recto + verso (file paths) ─────────────────────────
    val result = client.verify(
        VerifyOptions(
            steps             = listOf(Step.RECTO, Step.VERSO),
            target            = "SN-CIN",
            language          = Language.FRENCH,
            challengeMode     = ChallengeMode.MINIMAL,
            stepChallengeModes = mapOf("recto" to ChallengeMode.MINIMAL, "verso" to ChallengeMode.MINIMAL),
            images = mapOf(
                "recto_center_document" to "./images/cin_recto.jpg",   // file path
                "verso_center_document" to "./images/cin_verso.jpg",   // file path
            ),
        )
    )

    println("session: ${result.sessionId}")         // "468d970da539..."
    println("status: ${result.overallStatus}")       // PASS | REJECT
    println("confidence: ${result.overallConfidence}")

    result.steps.forEach { step ->
        println("${step.stepType}: ${step.liveness.score}")
        step.extraction?.sortedBy { it.displayPriority }?.forEach { f ->
            println("  ${f.label}: ${f.value}")
        }
    }

    // ── With raw bytes (ByteArray) ────────────────────────────────
    val rectoBytes = File("./recto.jpg").readBytes()
    val result2 = client.verify(VerifyOptions(
        steps = listOf(Step.RECTO), target = "SN-CIN", challengeMode = ChallengeMode.MINIMAL,
        imageBytes = mapOf("recto_center_document" to rectoBytes),  // ByteArray
    ))

    // ── Batch (up to 10 concurrent) ───────────────────────────────
    val batch = client.verifyBatch(listOf(
        VerifyOptions(steps = listOf(Step.RECTO), target = "SN-CIN", challengeMode = ChallengeMode.MINIMAL,
            images = mapOf("recto_center_document" to "./batch/01.jpg")),
        VerifyOptions(steps = listOf(Step.RECTO), target = "SN-CIN", challengeMode = ChallengeMode.MINIMAL,
            images = mapOf("recto_center_document" to "./batch/02.jpg")),
    ))

    // ── Webhook signature verification ────────────────────────────
    val valid = KyvShield.verifyWebhookSignature(rawBody, "YOUR_API_KEY", sigHeader)
}

package main

import (
    "context"
    "fmt"
    "log"
    "os"

    kyvshield "github.com/moussa-innolink/kyv_shield_restfull/go"
)

func main() {
    client := kyvshield.NewClient("YOUR_API_KEY", kyvshield.WithBaseURL("https://kyvshield-naruto.innolinkcloud.com"))
    ctx := context.Background()

    // ── Verify recto + verso (file paths) ─────────────────────────
    resp, err := client.Verify(ctx, &kyvshield.VerifyOptions{
        Steps:         []string{"recto", "verso"},
        Target:        "SN-CIN",
        Language:      "fr",
        ChallengeMode: "minimal",
        Images: map[string]string{
            "recto_center_document": "./images/cin_recto.jpg",   // file path
            "verso_center_document": "./images/cin_verso.jpg",   // file path
        },
    })
    if err != nil { log.Fatal(err) }

    fmt.Println(resp.SessionID)         // "468d970da539..."
    fmt.Println(resp.OverallStatus)     // "pass" | "reject"
    fmt.Printf("confidence: %.4f\n", resp.OverallConfidence)

    for _, step := range resp.Steps {
        fmt.Printf("%s: score=%.4f\n", step.StepType, step.Liveness.Score)
        for _, f := range step.Extraction {
            fmt.Printf("  %s: %s\n", f.Label, f.Value)
        }
    }

    // ── With raw bytes (ImageBytes map) ───────────────────────────
    rectoBytes, _ := os.ReadFile("./recto.jpg")
    versoBytes, _ := os.ReadFile("./verso.jpg")
    resp2, _ := client.Verify(ctx, &kyvshield.VerifyOptions{
        Steps: []string{"recto", "verso"}, Target: "SN-CIN", ChallengeMode: "minimal",
        ImageBytes: map[string][]byte{
            "recto_center_document": rectoBytes,   // []byte
            "verso_center_document": versoBytes,   // []byte
        },
    })
    _ = resp2

    // ── Images also accept: URL, base64, data URI ────────────────
    // Images: map[string]string{
    //   "recto_center_document": "https://example.com/recto.jpg",        // URL
    //   "recto_center_document": "data:image/jpeg;base64,/9j/4AA...",   // data URI
    //   "recto_center_document": "/9j/4AAQSkZJRg...",                   // base64
    // }

    // ── Batch (up to 10 concurrent) ───────────────────────────────
    batch, _ := client.VerifyBatch(ctx, []*kyvshield.VerifyOptions{
        {Steps: []string{"recto"}, Target: "SN-CIN", ChallengeMode: "minimal",
         Images: map[string]string{"recto_center_document": "./batch/01.jpg"}},
        {Steps: []string{"recto"}, Target: "SN-CIN", ChallengeMode: "minimal",
         Images: map[string]string{"recto_center_document": "./batch/02.jpg"}},
    })
    _ = batch

    // ── Webhook signature verification ────────────────────────────
    valid := kyvshield.VerifyWebhookSignature(rawBody, "YOUR_API_KEY", sigHeader)
    _ = valid
}

<!-- Include SDK -->
<script src="https://kyvshield-naruto.innolinkcloud.com/static/sdk/kyvshield.min.js"></script>

<script>
// ── Possible values ───────────────────────────────────────────────────
// steps       : 'selfie', 'recto', 'verso'
// challengeMode: 'minimal', 'standard', 'strict'
// selfieDisplayMode / documentDisplayMode: 'standard', 'compact', 'immersive', 'neonHud'
// themeMode   : 'light', 'dark'

// ── Fetch documents from API ──────────────────────────────────────────
const res = await fetch('https://kyvshield-naruto.innolinkcloud.com/api/v1/documents', {
  headers: { 'X-API-Key': 'YOUR_API_KEY' },
});
const { documents } = await res.json();
const selectedDoc = documents[0]; // or let user pick

// ── Start KYC ─────────────────────────────────────────────────────────
const result = await KyvShield.initKyc(
  {
    baseUrl: 'https://kyvshield-naruto.innolinkcloud.com',
    apiKey: 'YOUR_API_KEY',
    enableLog: true,
    theme: { primaryColor: '#EF8352', themeMode: 'light' },
  },
  {
    steps: ['selfie', 'recto', 'verso'],
    language: 'fr',
    showIntroPage: true,
    showInstructionPages: true,
    showResultPage: true,
    showSuccessPerStep: true,
    selfieDisplayMode: 'standard',
    documentDisplayMode: 'standard',
    challengeMode: 'minimal',
    requireFaceMatch: true,
    playChallengeAudio: true,
    maxChallengeAudioPlay: 1,
    pauseBetweenAudioPlay: 1000,
    target: selectedDoc,
    kycIdentifier: 'user-12345',
  }
);

// ── Handle result ─────────────────────────────────────────────────────
console.log('Success:', result.success);
console.log('Status:', result.overallStatus);   // pass, reject, error
console.log('Session:', result.sessionId);

// Selfie
if (result.selfieResult) {
  console.log('Live:', result.selfieResult.isLive);
  console.log('Image:', result.selfieResult.capturedImage?.length, 'bytes');
}

// Recto
if (result.rectoResult) {
  console.log('Score:', result.rectoResult.score);
  console.log('Fields:', result.rectoResult.extraction?.fields?.length);
  if (result.rectoResult.faceVerification) {
    console.log('Face match:', result.rectoResult.faceVerification.isMatch);
    console.log('Similarity:', result.rectoResult.faceVerification.similarityScore);
  }
}

// Extracted data
console.log('Nom:', result.getExtractedValue?.('nom'));
console.log('NIN:', result.getExtractedValue?.('nin'));
</script>

import sn.innolink.kyvshield.lite.KyvshieldLite
import sn.innolink.kyvshield.lite.KyvshieldInput
import sn.innolink.kyvshield.lite.config.*
import sn.innolink.kyvshield.lite.result.*

// ── Possible values ───────────────────────────────────────────────────
// CaptureStep        : selfie, recto, verso
// ChallengeMode      : minimal, standard, strict
// SelfieDisplayMode  : standard, compact, immersive, neonHud
// DocumentDisplayMode: standard, compact, immersive, neonHud
// ChallengeAudioRepeat: once, twice, thrice

// ── Fetch documents from API ──────────────────────────────────────────
// GET https://kyvshield-naruto.innolinkcloud.com/api/v1/documents
// Header: X-API-Key: YOUR_API_KEY
// Parse response -> List<KyvshieldDocument> via KyvshieldDocument.fromJson()

// ── With Jetpack Compose (ActivityResultContract) ─────────────────────

val kycLauncher = rememberLauncherForActivityResult(
    KyvshieldLite.getResultContract()
) { result: KYCResult ->
    // Handle result
    println("Success: ${result.success}")
    println("Status: ${result.overallStatus}")
}

// Build config
val config = KyvshieldConfig(
    baseUrl = "https://kyvshield-naruto.innolinkcloud.com",
    apiKey = "YOUR_API_KEY",
    enableLog = true,
    theme = KyvshieldThemeConfig(
        primaryColor = 0xFFEF8352.toInt(),
        darkMode = false,
    ),
)

// Build flow
val flow = KyvshieldFlowConfig(
    steps = listOf(CaptureStep.selfie, CaptureStep.recto, CaptureStep.verso),
    language = "fr",
    showIntroPage = true,
    showInstructionPages = true,
    showResultPage = true,
    showSuccessPerStep = true,
    selfieDisplayMode = SelfieDisplayMode.standard,
    documentDisplayMode = DocumentDisplayMode.standard,
    challengeMode = ChallengeMode.minimal,
    requireFaceMatch = true,
    playChallengeAudio = true,
    maxChallengeAudioPlay = ChallengeAudioRepeat.once,
    pauseBetweenAudioPlayMs = 1000L,
    stepChallengeModes = mapOf(
        CaptureStep.selfie to ChallengeMode.minimal,
        CaptureStep.recto to ChallengeMode.standard,
        CaptureStep.verso to ChallengeMode.minimal,
    ),
    target = selectedDoc,
    kycIdentifier = "user-12345",
)

// Launch KYC
kycLauncher.launch(KyvshieldInput(config, flow))

// ── Handle result ─────────────────────────────────────────────────────

println("Success: ${result.success}")
println("Status: ${result.overallStatus}")   // pass, reject, error
println("Session: ${result.sessionId}")

// Selfie
result.selfieResult?.let {
    println("Live: ${it.isLive}")
    println("Image: ${it.capturedImage?.size ?: 0} bytes")
}

// Recto
result.rectoResult?.let {
    println("Recto score: ${it.score}")
    println("Aligned doc: ${it.alignedDocument?.size ?: 0} bytes")
    println("Photos: ${it.extractedPhotos.size}")
    println("Fields: ${it.extraction?.fields?.size ?: 0}")
    it.faceVerification?.let { fv ->
        println("Face match: ${fv.isMatch}")
        println("Similarity: ${fv.similarityScore}")
    }
}

// Verso
result.versoResult?.let {
    println("Verso score: ${it.score}")
    println("Fields: ${it.extraction?.fields?.size ?: 0}")
}

// Extracted data (searches recto + verso)
println("Nom: ${result.getExtractedValue("nom")}")
println("NIN: ${result.getExtractedValue("nin")}")

// Loop all fields sorted by priority
result.rectoResult?.extraction?.sortedFields?.forEach { field ->
    println("${field.label}: ${field.stringValue}")
}

import KyvshieldLite

// ── Possible values ───────────────────────────────────────────────────
// CaptureStep        : .selfie, .recto, .verso
// ChallengeMode      : .minimal, .standard, .strict
// SelfieDisplayMode  : .standard, .compact, .immersive, .neonHud
// DocumentDisplayMode: .standard, .compact, .immersive, .neonHud
// ChallengeAudioRepeat: .once, .twice, .thrice

// ── Fetch documents from API ──────────────────────────────────────────

let url = URL(string: "https://kyvshield-naruto.innolinkcloud.com/api/v1/documents")!
var request = URLRequest(url: url)
request.setValue("YOUR_API_KEY", forHTTPHeaderField: "X-API-Key")
let (data, _) = try await URLSession.shared.data(for: request)
let json = try JSONSerialization.jsonObject(with: data) as! [String: Any]
let docsJson = json["documents"] as! [[String: Any]]
let docs = docsJson.map { KyvshieldDocument.fromJson($0) }
let selectedDoc = docs.first!

// ── Request camera permission ─────────────────────────────────────────

KyvshieldLite.requestCameraPermission { granted in
    guard granted else {
        if KyvshieldLite.isCameraPermissionDenied() {
            KyvshieldLite.openSettings()
        }
        return
    }
    startKyc(doc: selectedDoc)
}

// ── Start KYC (UIKit) ─────────────────────────────────────────────────

func startKyc(doc: KyvshieldDocument) {
    let config = KyvshieldConfig(
        baseUrl: "https://kyvshield-naruto.innolinkcloud.com",
        apiKey: "YOUR_API_KEY",
        enableLog: true,
        theme: KyvshieldThemeConfig(
            primaryColor: UIColor(hex: "#EF8352"),
            brightness: .light
        )
    )

    let flow = KyvshieldFlowConfig(
        steps: [.selfie, .recto, .verso],
        target: doc,
        kycIdentifier: "user-12345",
        challengeMode: .minimal,
        stepChallengeModes: [
            .selfie: .minimal,
            .recto: .standard,
            .verso: .minimal,
        ],
        selfieDisplayMode: .standard,
        documentDisplayMode: .standard,
        requireFaceMatch: true,
        showIntroPage: true,
        showInstructionPages: true,
        showResultPage: true,
        showSuccessPerStep: true,
        language: "fr",
        playChallengeAudio: true,
        maxChallengeAudioPlay: .once,
        pauseBetweenAudioPlayMs: 1000
    )

    KyvshieldLite.initKyc(from: self, config: config, flow: flow) { result in
        self.handleResult(result)
    }
}

// ── SwiftUI alternative ───────────────────────────────────────────────

// .fullScreenCover(isPresented: $showKyc) {
//     KyvshieldView(config: config, flow: flow) { result in
//         showKyc = false
//         handleResult(result)
//     }
// }

// ── Handle result ─────────────────────────────────────────────────────

func handleResult(_ result: KYCResult) {
    print("Success: \(result.success)")
    print("Status: \(result.overallStatus)")   // .pass, .reject, .error
    print("Session: \(result.sessionId ?? "")")

    // Selfie
    if let selfie = result.selfieResult {
        print("Live: \(selfie.isLive)")
        print("Image: \(selfie.capturedImage?.count ?? 0) bytes")
    }

    // Recto
    if let recto = result.rectoResult {
        print("Recto score: \(recto.score)")
        print("Aligned doc: \(recto.alignedDocument?.count ?? 0) bytes")
        print("Photos: \(recto.extractedPhotos.count)")
        print("Fields: \(recto.extraction?.fields.count ?? 0)")
        if let fv = recto.faceVerification {
            print("Face match: \(fv.isMatch)")
            print("Similarity: \(fv.similarityScore)")
        }
    }

    // Verso
    if let verso = result.versoResult {
        print("Verso score: \(verso.score)")
        print("Fields: \(verso.extraction?.fields.count ?? 0)")
    }

    // Extracted data (searches recto + verso)
    print("Nom: \(result.getExtractedValue("nom") ?? "")")
    print("NIN: \(result.getExtractedValue("nin") ?? "")")

    // Loop all fields sorted by priority
    for field in result.rectoResult?.extraction?.sortedFields ?? [] {
        print("\(field.label): \(field.stringValue ?? "")")
    }
}

import React, { useState } from 'react';
import { Button, View, Alert } from 'react-native';
import {
  KyvshieldModal,
  FlowPresets,
  requestCameraPermission,
  isCameraPermissionDenied,
  openSettings,
  kycResultGetExtractedValue,
} from '@kyvshield/react-native';
import type {
  KyvshieldConfig,
  KyvshieldFlowConfig,
  KyvshieldDocument,
  CaptureStep,
  ChallengeMode,
  SelfieDisplayMode,
  DocumentDisplayMode,
  KYCResult,
} from '@kyvshield/react-native';

// ── Possible values ───────────────────────────────────────────────────
// CaptureStep        : 'selfie', 'recto', 'verso'
// ChallengeMode      : 'minimal', 'standard', 'strict'
// SelfieDisplayMode  : 'standard', 'compact', 'immersive', 'neonHud'
// DocumentDisplayMode: 'standard', 'compact', 'immersive', 'neonHud'
// ChallengeAudioRepeat: 'once', 'twice', 'thrice'

// ── Fetch documents from API ──────────────────────────────────────────

async function fetchDocuments(): Promise<KyvshieldDocument[]> {
  const res = await fetch(
    'https://kyvshield-naruto.innolinkcloud.com/api/v1/documents',
    { headers: { 'X-API-Key': 'YOUR_API_KEY' } },
  );
  const { documents } = await res.json();
  return documents;
}

// ── Config ────────────────────────────────────────────────────────────

const config: KyvshieldConfig = {
  baseUrl: 'https://kyvshield-naruto.innolinkcloud.com',
  apiKey: 'YOUR_API_KEY',
  enableLog: true,
  theme: {
    primaryColor: '#EF8352',
    darkMode: false,
  },
};

// ── Flow ──────────────────────────────────────────────────────────────

const flow: KyvshieldFlowConfig = {
  steps: ['selfie', 'recto', 'verso'] as CaptureStep[],
  language: 'fr',
  showIntroPage: true,
  showInstructionPages: true,
  showResultPage: true,
  showSuccessPerStep: true,
  selfieDisplayMode: 'standard' as SelfieDisplayMode,
  documentDisplayMode: 'standard' as DocumentDisplayMode,
  challengeMode: 'minimal' as ChallengeMode,
  requireFaceMatch: true,
  playChallengeAudio: true,
  maxChallengeAudioPlay: 'once',
  pauseBetweenAudioPlayMs: 1000,
  target: selectedDoc,
  kycIdentifier: 'user-12345',
};

// ── Component ─────────────────────────────────────────────────────────

export default function App() {
  const [visible, setVisible] = useState(false);

  const startKyc = async () => {
    const granted = await requestCameraPermission();
    if (!granted) {
      const denied = await isCameraPermissionDenied();
      if (denied) openSettings();
      return;
    }
    setVisible(true);
  };

  const handleResult = (result: KYCResult) => {
    setVisible(false);

    console.log('Success:', result.success);
    console.log('Status:', result.overallStatus); // pass, reject, error
    console.log('Session:', result.sessionId);

    // Selfie
    if (result.selfieResult) {
      console.log('Live:', result.selfieResult.isLive);
      console.log('Image:', result.selfieResult.capturedImageBase64?.length, 'chars');
    }

    // Recto
    if (result.rectoResult) {
      console.log('Score:', result.rectoResult.score);
      console.log('Fields:', result.rectoResult.extraction?.fields?.length);
      if (result.rectoResult.faceVerification) {
        console.log('Face match:', result.rectoResult.faceVerification.isMatch);
        console.log('Similarity:', result.rectoResult.faceVerification.similarityScore);
      }
    }

    // Extracted data
    console.log('Nom:', kycResultGetExtractedValue(result, 'nom'));
    console.log('NIN:', kycResultGetExtractedValue(result, 'nin'));
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Start KYC" onPress={startKyc} />
      <KyvshieldModal
        visible={visible}
        config={config}
        flow={flow}
        onResult={handleResult}
        onDismiss={() => setVisible(false)}
      />
    </View>
  );
}