---
title: 'React Native'
description: "Paket iOS/Android @json-eval-rs/react-native melangsungkan komunikasi TurboModule C++ melalui bridge JSI."
navigation:
  icon: 'i-simple-icons-react'
seo:
  title: 'React Native'
  description: "Paket iOS/Android @json-eval-rs/react-native melangsungkan komunikasi TurboModule C++ melalui bridge JSI."
---

# Menggunakan JSONEval-Rs di React Native

Paket `@json-eval-rs/react-native` meng-host dirinya sendiri pada Javascript Interface (JSI). Modul ini menghilangkan proses serialisasi Bridge yang lambat tiap melempar data besar sehingga Native UI thread tidak ngelag.

## 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

Untuk mengatasi kehilangan presisi mutlak parsing objek diatas limit `Number.MAX_SAFE_INTEGER`, core library menembakkan format data 64-bit dan mencerna tipenya menggunakan native interop `BigInt` buatan Javascript. Lepas dan beres.

## Contoh Penggunaan Praktis

Paket memuat hooks react komplit tanpa repot.

### 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 rendering React form builder berbobot mega-bytes, mengambil schema json utuh lewat get root properti merupakan anti-pattern membunuh performa. Selidiki state via fungsi penunjuk path seperlunya!

```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`). 
