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();
  }, []);

}

const databaseId = 'REPLACE_ME_WITH_YOUR_DATABASE_ID';
const connectConfig = {
  mode: 'server',
  url: `https://${databaseId}.cloud.ditto.live`,
};
const config = new DittoConfig(databaseId, connectConfig);

const connectConfig = {
  mode: 'server',
  url: 'https://auth.your-company.com',
};
const config = new DittoConfig('REPLACE_ME_WITH_YOUR_DATABASE_ID', connectConfig);

const connectConfig = {
  mode: 'smallPeersOnly',
};
const config = new DittoConfig('REPLACE_ME_WITH_YOUR_DATABASE_ID', connectConfig);

const connectConfig = {
  mode: 'smallPeersOnly',
  privateKey: 'your-base64-encoded-private-key-here',
};
const config = new DittoConfig('REPLACE_ME_WITH_YOUR_DATABASE_ID', connectConfig);

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

// Create your config (use examples from above)
const config = new DittoConfig(databaseId, connectConfig);

// Open Ditto instance
const ditto = await Ditto.open(config);

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

// Set up token refresh
await ditto.auth.setExpirationHandler(async (ditto, timeUntilExpiration) => {
  console.log('Token expiring soon:', timeUntilExpiration);
  
  if (ditto.auth.loginSupported) {
    const result = await ditto.auth.login('your-playground-token', Authenticator.DEVELOPMENT_PROVIDER);
    if (result.error) {
      console.error('Re-authentication failed:', result.error);
    }
  }
});

// Initial login
if (ditto.auth.loginSupported) {
  const result = await ditto.auth.login('your-playground-token', Authenticator.DEVELOPMENT_PROVIDER);
  if (result.error) {
    console.error('Login failed:', result.error);
  } else {
    console.log('Successfully logged in');
  }
}

// ... 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 DOCUMENTS (:document) ON ID CONFLICT DO UPDATE",
  { document }
  );
console.log(queryResult.items.map((item) => item.value));
console.log(
  "mutated",
  queryResult.mutatedDocumentIDsV2()
);

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

  // save state or other use cases
});

ditto.sync.start();

// 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';