Schnellstart für React Native

Am Ende dieser Seite hast du eine React Native App mit einem Ende-zu-Ende-verschlüsselten Dokumentenspeicher — auf Basis von nativem, Rust-basiertem Automerge und nativer Krypto, ohne WebAssembly und ohne Overhead durch JavaScript-Krypto.

Voraussetzungen

• Expo SDK 52+ mit einem Development Build (nicht Expo Go)
• Node.js 20+
• iOS 13+ oder Android 6.0+ (API-Level 23+)

1) Abhängigkeiten installieren

Installiere MindooDB und das native Automerge-Backend in deinem bestehenden Projekt mit Expo / React Native:

npm install mindoodb react-native-automerge-generated

2) Setup-Helper ausführen

Er kopiert die nötigen Patches (für react-native-quick-crypto und React Native), installiert zusätzliche Abhängigkeiten (native Krypto, Polyfills, patch-package) und gibt Hinweise zur Metro-Konfiguration aus.

npx mindoodb setup-react-native

Folge den Anweisungen, die der Helper ausgibt. Die vollständige Liste der installierten Pakete steht im React Native guide.

3) Polyfills & natives Automerge initialisieren

Ersetze deinen Einstiegspunkt index.js durch Folgendes. Die Polyfills müssen zuerst geladen werden; danach wird das native Automerge-Backend registriert, bevor App-Code läuft.

// index.js — FIRST lines, before any other imports
import "./mindoodb-polyfills";

import { UseApi } from "@automerge/automerge/slim";
import { nativeApi } from "react-native-automerge-generated";
UseApi(nativeApi);

import { registerRootComponent } from "expo";
import App from "./App";
registerRootComponent(App);

Die Datei mindoodb-polyfills.js wird in Schritt 2 vom Setup-Helper erzeugt. Sie stellt TextEncoder, TextDecoder, URL- und Krypto-Polyfills bereit.

4) MindooDB-Code einfügen

Lege eine Datei an (z. B. mindoo-demo.js) mit folgendem Inhalt. Der entscheidende Unterschied zu Node.js: Du übergibst einen QuickCryptoAdapter, der für alle kryptografischen Operationen natives OpenSSL über react-native-quick-crypto nutzt.

import {
  BaseMindooTenantFactory,
  InMemoryContentAddressedStoreFactory,
  QuickCryptoAdapter,
} from "mindoodb";
import * as quickCrypto from "react-native-quick-crypto";

export async function runMindooDemo() {
  // React Native uses native crypto via react-native-quick-crypto
  const cryptoAdapter = new QuickCryptoAdapter(quickCrypto);
  const storeFactory = new InMemoryContentAddressedStoreFactory();
  const factory = new BaseMindooTenantFactory(storeFactory, cryptoAdapter);

  // One call creates admin + user keys, KeyBag, and directory
  const { tenant, adminUser, appUser, keyBag } =
    await factory.createTenant({
      tenantId: "my-first-tenant",
      adminName: "cn=admin/o=demo",
      adminPassword: "admin-password",
      userName: "cn=alice/o=demo",
      userPassword: "user-password",
    });

  // Open a database and create a todo document
  const db = await tenant.openDB("todos");
  const todo = await db.createDocument();
  await db.changeDoc(todo, async (d) => {
    const data = d.getData();
    data.title = "Pay invoices";
    data.done = false;
  });

  // Read it back
  const ids = await db.getAllDocumentIds();
  const loaded = await db.getDocument(ids[0]);
  console.log("Loaded todo:", loaded.getData());
  return loaded.getData();
}

5) Bauen & starten

Native Module brauchen einen kompilierten Build. Führe eines der folgenden Kommandos aus:

# iOS
npx expo prebuild --clean
npx expo run:ios

# Android
npx expo prebuild --clean
npx expo run:android

Rufe runMindooDemo() aus deiner App-Komponente auf (z. B. in einem useEffect). In der Metro-Konsole erscheint:

Loaded todo: { title: 'Pay invoices', done: false }