React Native Install Guide

yarn add @dittolive/ditto

yarn install

{
  "expo": {
    "plugins": ["@dittolive/ditto"]
  }
}

{
  "expo": {
    "plugins": [
      "@dittolive/ditto",
      [
        "expo-build-properties",
        {
          "android": {
            "minSdkVersion": 24,
            "kotlinVersion": "1.9.0"
          },
          "ios": {
            "deploymentTarget": "14.0"
          }
        }
      ]
    ]
  }
}

{
  "expo": {
    "plugins": [
      [
        "@dittolive/ditto",
        {
          "bluetoothUsageDescription": "My custom BLE usage prompt message.",
          "localNetworkUsageDescription": "My custom LAN usage prompt message."
        }
      ]
    ]
  }
}

import {useEffect} from 'react';
import {PermissionsAndroid, Platform} from 'react-native';

export default function App() {

  async function requestPermissions() {
    if (Platform.OS !== 'android') {
      return;
    }

    const granted = await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT,
      PermissionsAndroid.PERMISSIONS.BLUETOOTH_ADVERTISE,
      PermissionsAndroid.PERMISSIONS.NEARBY_WIFI_DEVICES,
      PermissionsAndroid.PERMISSIONS.BLUETOOTH_SCAN,
    ]);

    Object.entries(granted).forEach(([permission, result]) => {
      if (result === PermissionsAndroid.RESULTS.GRANTED) {
        console.log(`${permission} granted`);
      } else {
        console.log(`${permission} denied`);
      }
    });
  }

  useEffect(() => {
    requestPermissions();
  }, []);

}

// Your HTTP Cloud URL Endpoint
const endpoint = "https://YOUR_DATABASE_ID.myendpoint.com";
const databaseId = "YOUR_DATABASE_ID";

const config = new DittoConfig(
    databaseId, // This was "appID" in v4
    {
        type: 'server',
        url: endpoint
    }
);

const ditto = await Ditto.open(config);

// Set up authentication expiration handler for custom auth
ditto.auth.expirationHandler = async (ditto, secondsRemaining) => {
    // Authenticate when token is expiring
    try {
        await ditto.auth.login(
            'will-accept-any-password',
            'auth-webhook' // Your custom authentication provider name
        );
        console.log("Authentication successful");
    } catch (error) {
        console.error("Authentication failed:", error);
    }
};

import {Ditto, DittoConfig, DittoError} from '@dittolive/ditto';

try {
  const ditto = await Ditto.open(config);
} catch (error) {
  if (error instanceof DittoError) {
    // handle errors starting Ditto
  }
  throw error
}

// ... Ditto init logic

ditto.sync.registerSubscription(`SELECT * FROM cars`);

const document = {
  id: 987654,
  _id: 123131,
  model: "CX-5",
  make: "Mazda",
  color: "blue",
};

const queryResult = await ditto.store.execute(
  "INSERT INTO cars VALUES (:document) ON ID CONFLICT DO UPDATE",
  { document }
  );
console.log(queryResult.items.map((item) => item.value));
console.log(
  "mutated",
  queryResult.mutatedDocumentIDs().map((docId) => docId.value)
);

ditto.store.registerObserver(`SELECT * FROM cars`, (response) => {
  const parsedDocuments = response.items.map((doc) => {
    return doc.value;
  });

  // save state or other use cases
});

ditto.startSync();

// This closure is called every time the mesh of
// connected Ditto peers changes:
ditto.presence.observe((graph) => {
  console.log('Peers: ', graph.remotePeers);
});

import {Logger} from '@dittolive/ditto';

...

Logger.minimumLogLevel = 'Debug';