React Native Task App
This quickstart guide offers a detailed, step-by-step walkthrough for integrating the Ditto SDK in a prebuilt template of a basic to-do task app developed using React Native for iOS and Android targets.
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:
- Ditto Access Credentials
- Node.js version 12 LTS or later
- Git
- Visual Studio Code¹
- Xcode 15 (or later)
- Android Studio Hedgehog
- React Native CLI
¹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:
For instructions on setting up your environment for React Native, see Setting up the development environment in the official documentation.
From the directory you want to clone the project to and change into the <todo> root directory:
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:
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.
If needed, install the doctor:
If using npm as your package manager:
From the root directory, run the doctor:
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:
From the root directory, confirm that the task app builds successfully for your target platform:
Installing Ditto
Now that you’re environment is all set up, install the Ditto SDK package into your project:
Was this page helpful?