---
title: 'React Native'
description: "Paket @json-eval-rs/react-native menyediakan penghubung (binding) berperforma tinggi untuk iOS dan Android, menggunakan JSI (JavaScript Interface) untuk komunikasi langsung dengan C++."
navigation:
  icon: 'i-simple-icons-react'
seo:
  title: 'React Native'
  description: "Paket @json-eval-rs/react-native menyediakan penghubung (binding) berperforma tinggi untuk iOS dan Android, menggunakan JSI (JavaScript Interface) untuk komunikasi langsung dengan C++."
---

# Menggunakan JSONEval-Rs di React Native

Paket `@json-eval-rs/react-native` terhubung secara mendalam melalui JSI (JavaScript Interface) dengan melompati jalur serialisasi bridge secara tradisional (bridge payload serialization). Ini akan membuatmu sanggup mengatasi performansi struktur JSON kompleks tanpa sama sekali mengganggu Thread UI Native.

## Instalasi

```bash
yarn add @json-eval-rs/react-native
# atau
npm install @json-eval-rs/react-native
```

### Pengaturan iOS
```bash
cd ios && pod install
```

## Dukungan Penuh BigInt

JavaScript seringkali kehilangan presisi pada angka bulat yang melewati batas `Number.MAX_SAFE_INTEGER` (2^53 - 1). Namun pada jembatan koneksi JSI dengan C++, library React Native ini mengimplementasikan `json-with-bigint` secara internal. Hal ini secara otomatis mencegah ID data dan nomor raksasa termutilasi menjadi floating-point biasa; mereka diselamatkan agar tampil mutlak presisi dengan konversi tipe `BigInt` JavaScript bawaan.

## Contoh Penggunaan Praktis

Library ini menyediakan hook efisien yang memetakan kapabilitas kelas pusat (core) secara mudah.

### 1. Validasi Input Form Standar

Gunakan `useJSONEval` untuk membersihkan alokasi pengikatan (binding) C++ layaknya performa React unmount form yang dibersihkan secara otomatis.

```typescript
import React, { useState } from 'react';
import { View, Text, TextInput } from 'react-native';
import { useJSONEval } from '@json-eval-rs/react-native';

const schema = {
  type: 'object',
  properties: {
    username: {
      type: 'string',
      rules: {
        required: { value: true, message: 'Username wajib diisi' },
        minLength: { value: 3, message: 'Minimal 3 karakter' }
      }
    }
  }
};

export default function SignupForm() {
  const [data, setData] = useState({ username: '' });
  const [errors, setErrors] = useState({});
  
  // Inisialisasi evaluator instance
  const evalInstance = useJSONEval({ schema });

  const handleChange = async (text: string) => {
    const newData = { username: text };
    setData(newData);

    if (evalInstance) {
      const validation = await evalInstance.validate({ 
        data: JSON.stringify(newData) 
      });
      
      setErrors(validation.errors || {});
    }
  };

  return (
    <View>
      <TextInput 
        value={data.username}
        onChangeText={handleChange}
        placeholder="Username"
      />
      {errors.username && (
        <Text style={{color: 'red'}}>{errors.username.message}</Text>
      )}
    </View>
  );
}
```

### 2. Memanggil Schema Berdasarkan Jalur Tertentu (Path)

Untuk schema raksasa di React Native (ukuran lebih dari 1 MB dll.), mengambil beban satu utuh JSON melalui thread hanyalah untuk mendapat properti tertentu merupakan anti-pattern. Jadi, ambilah komponen spesifik yang divalidasi saja (path):

```typescript
const resolveSpecificDiscount = async () => {
  // Evaluasi seluruh logic sebelum membaca path (opsional)
  await evalInstance.evaluate({ data: JSON.stringify(currentData) });

  // Panggil eksekusi terkomputasi langsung pada elemen
  const specificPathResult = await evalInstance.getEvaluatedSchemaByPath({
    path: "#/properties/hidden_discount",
    skipLayout: true
  });
  
  // Misal: Jika komponen itu ditampilkan dari schema Logic Rule
  if (!specificPathResult.hidden) {
    setDiscountState(specificPathResult.value);
  }
};
```

### 3. Evaluasi Subform Dinamis / Array Tingkat Lanjut

Apabila data render seperti daftar barang FlatList divalidasi ulang lewat induk teratas form pada tiap key press; baterai serta FPS JS pasti terkuras seketika. Ambil alih optimasinya melalui eksekusi isolasi via fitur Subform!

```typescript
const handleItemUpdate = async (itemIndex: number, itemData: any) => {
  const subformPath = "#/shopping_cart_items"; // Path penampung elemen array kamu
  
  // Verifikasi jika Engine melacak path Subform dari memori
  if (await evalInstance.hasSubform(subformPath)) {
      
      // 1. Validasi spesifik terhadap item per-elemen
      await evalInstance.evaluateSubform({
         subformPath,
         data: itemData
      });

      // 2. Amankan kalkulasi (dari array items -> kalkulasi properti objek list itu semata)
      const updatedTotal = await evalInstance.getEvaluatedSchemaByPathSubform({
         subformPath,
         path: "#/properties/item_total" // Variabel dari anak subform
      });

      console.log('Update Hasil Terpisah (Per-Garis): ', updatedTotal.value);
  }
};
```

## Referensi API Inti Tersedia

Kelas turunan `JSONEval` mengeksekusi referensi internal sebanding WebAssembly. Catatan kritis: Perintah pembebasan `eval.dispose()` diwajibkan bila skema ini dikendalikan tanpa hook React seperti memadukannya sebagai utilitas murni dengan Redux / Zustand di background.

- **`validate({ data, paths? })`** dan **`evaluate({ data, paths? })`**: Jalur runner murni mengembalikan struktur penuh secara objektif.
- **`validatePaths({ data, paths })`**: Validasi spesifik mengejar properti tertentu melewati pohon evaluasi (tree) yang teramat kompleks atau lebar.
- **`evaluateOnly({ data })`**: Melaksanakan evaluasi mutasi namun mengembalikan hasil `void` murni; ini sangat jitu pada pemanggilan berulang untuk pemuatan memory native sebelum kamu menggunakan metode **Getter** yang presisi di bawah.
- **`compileLogic(logicStr)` / `runLogic(logicId, data)`**: Pemetaan independen rule string berbasis JSON Logic secara cepat.

#### Kapabilitas Schema Getters

- `getEvaluatedSchema(skipLayout: boolean)`
- `getEvaluatedSchemaByPath({ path, skipLayout })`
- `getSchemaValueArray()` vs `getSchemaValueObject()`

#### API Kombinasi Subform (Subform Getters API)
Kebanyakan fungsi mutlak memiliki versi ekstensi yang mirip demi menyorot eksekutor terisolasi pada Subform (Arrays):
- `validateSubform()`
- `evaluateDependentsSubform()` 
- `resolveLayoutSubform()`
- `getEvaluatedSchemaByPathSubform()`

## Pemecahan Masalah / Kegagalan Umum

### Error "Native module not found"
-   Pastikan kamu telah mengeksekusi `pod install` dalam direktori `ios`.
-   Pastikan melakukan kompilasi ulang pada Xcode/JDK via `yarn android` atau `yarn ios`.
-   Expo Go mandiri tak mensupport modifikasi native secara langsung, alihkan proyek menuju Development Build / Custom Build Expo CLI.

### Crash Relatif Antarmuka (JSI)
-   Library yang berdiri menempel langsung ke engine C++ terkadang bersilang konfigurasi dengan arsitektur JSI milik Metro. Jika terjadi kerancuan build crash, muat bersih referensi (clear bundler cache `yarn start -c` dan juga opsi re-load terminal ganda `r - r`). 
