You’ll learn how to integrate Ditto in an app built with React Native, query data using the Ditto Query Language (DQL), and implement offline sync functionalities through create, read, update, and delete (CRUD) operations.

Before you start the build process using the Ditto SDK, ensure you have a stable internet connection and sufficient storage on your machine. Otherwise, there is potential for the necessary dependencies to fail to download automatically, potentially compromising the functionality of the software.

Prerequisites

Before you get started, make sure your environment is ready:

¹For optimal compatibility with the platform, Ditto recommends Visual Studio Code; however, you may use any IDE you prefer.

Getting Started

Once you’ve confirmed that your environment is set up and you meet the prerequisites, clone Ditto’s prebuilt task app project to your local machine and install the necessary dependencies:

1

For instructions on setting up your environment for React Native, see Setting up the development environment in the official documentation.

2

From the directory you want to clone the project to and change into the <todo> root directory:

codeblocktabs
git clone https://github.com.git
cd example

From the root directory of your project, install the project’s dependencies based on the package.json file:

If using npm as your package manager:

codeblocktabs
npm install

Verifying Setup

Make sure that you have set up your development environment correctly by running the React Native CLI doctor:

For more information about the doctor, see React Native’s blog post: Meet Doctor, a new React Native command.

1

If needed, install the doctor:

If using npm as your package manager:

codeblocktabs
npm install @react-native-community/cli-doctor
2

From the root directory, run the doctor:

codeblocktabs
npx @react-native-community/cli doctor
3

If the doctor detects any vulnerabilities in your project, follow the fix advice that appears. For example, create or connect an emulator and set the Android SDK to version 33.0.0 in Android Studio:

4

From the root directory, confirm that the task app builds successfully for your target platform:

codeblocktabs
npx react-native start

Installing Ditto

Now that you’re environment is all set up, install the Ditto SDK package into your project:

codeblocktabs
npm install --save @dittolive/ditto