@dittolive/react-native NPM

Ditto React Native SDK

Disclaimer: This package is in alpha stage. While it is feature-rich and stable for many use cases, expect some rough edges and API changes before the official release.

Please note that the current version of this SDK has been validated exclusively on ARM-based iOS simulators using the aarch64 architecture and Android emulators running the arm64-v8a architecture and supports syncing data only with Ditto Portal's online playground.

Introduction
Features
Installation
Android Configuration
Getting Started
Examples
License

Introduction

Ditto is a real-time database for mobile, web, IoT, and server apps that can magically sync data without the internet. This SDK allows React Native developers to integrate Ditto into their apps.

Features

📱 Cross-platform support (iOS, Android).
🚀 High performance and optimized for low latency (TurboModules & JSI).
🌐 DQL (Ditto Query Language) ready.

Installation

To install the alpha version of @dittolive/react-native, run the following command:

npm install @dittolive/react-native

yarn add @dittolive/react-native

Android Configuration

Important: This SDK’s required minSdkVersion is 24.

To update, modify your android/build.gradle:

buildscript {
    ext {
        // ... existing configuration

        minSdkVersion = 24  // Modify version to 24
    }
    // ... rest of the buildscript
}

Resolving Native Library Conflicts

If you encounter an issue related to duplicate native libraries (libjsi.so or others), you can resolve it by adding the following packagingOptions in your android/app/build.gradle file:

android {
    // ... existing configuration

    packagingOptions {
        pickFirst 'lib/arm64-v8a/libjsi.so'
        pickFirst 'lib/armeabi-v7a/libjsi.so'
        pickFirst 'lib/x86/libjsi.so'
        pickFirst 'lib/x86_64/libjsi.so'
    }
}

Getting Started

Import the SDK in your React Native project:

import { Ditto } from '@dittolive/react-native';

Initialize the SDK with Ditto Portal values:

const ditto = new Ditto({
  appID: '<YOUR_APP_ID>',
  token: '<YOUR_TOKEN>',
});

You're all set! You can now use the SDK.

Example

We've provided an example application to showcase the capabilities of Ditto React Native SDK. You can find practical implementations in the App.tsx file of the example app (/example/src/App.tsx). Be sure to replace your appID and token with values from the Ditto Portal.