Skip to main content

​
Prerequisites

Ditto’s React Native Quickstart supports iOS, Android, and macOS with both React Native CLI and Expo variants available. Before getting started, ensure you have the following:
  • A code editor (Visual Studio Code is our recommendation, but any code editor will work)
  • Git installed on your machine
  • Node.js installed on your machine
  • A Ditto Portal account with a configured Ditto Database (see Getting SDK Connection Details)
  • Android Studio installed on your machine
  • A physical Android device or Android emulator
  • A macOS machine with the latest version of Xcode (16 or later) installed
  • A physical iOS device or iOS simulator

​
Get Started

​
1. Clone the Repository

  1. Open the terminal
  2. Clone the repository from GitHub. 
    git clone https://github.com/getditto/quickstart
  3. Navigate to the React Native project directory: 
    cd quickstart/react-native
    The quickstart repository contains both react-native (CLI) and react-native-expo variants. Choose the one that matches your preferred development approach.

​
2. Configure Ditto

​
Get Ditto Database ID, Playground Token, Auth URL, and Websocket URL

​
Add Ditto Credentials

  1. Copy the .env.sample file at the root of the quickstart repo to .env and add your app ID and online playground token. 
    cp .env.sample .env
  2. Update the .env file with the Database ID and Playground Token from your Ditto Database 
    DITTO_APP_ID="REPLACE_ME_WITH_YOUR_DATABASE_ID"
DITTO_PLAYGROUND_TOKEN="REPLACE_ME_WITH_YOUR_PLAYGROUND_TOKEN"
DITTO_AUTH_URL="REPLACE_ME_WITH_YOUR_AUTH_URL"

​
3. Run the Application

  1. Open a terminal and navigate to your application folder.
  2. Install dependencies 
    yarn install
  3. Run the Application 
    (cd ios && pod install)
npx react-native run-ios

​
4. Sync-Data Offline

​
Next Steps

All the Ditto Quickstart apps work together! Try running a quickstart app in other languages and see them all collaborate.

​
Additional Resources