> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ditto.live/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native Quickstart

> Get started quickly with Ditto using the Ditto Quickstart Applications

export const QuickstartConfigTitleAndDatabaseIdBody = () => <div>
        <ol>
            <li>
                Log in to your <a href="https://portal.ditto.live" target="_blank">Ditto Portal account</a>
            </li>
            <li>
                Navigate to your database and obtain the Ditto <b>Database ID</b>, <b>Playground Token</b>, <b>Auth URL</b>, and <b>Websocket URL</b>.
                (see <a href="/cloud/portal/getting-sdk-connection-details">Getting SDK Connection Details</a> for more details)
            </li>
        </ol>
    </div>;

export const QuickstartSyncDataOfflineBody = () => <div>
        <ol>
            <li>Launch the application on multiple devices or simulators</li>
            <li>Disconnect from your current WiFi network while keeping WiFi enabled on the device to allow for LAN connections</li>
            <li>Add, edit, and delete tasks and experience offline collaboration!</li>
        </ol>
    </div>;

export const QuickstartCloneTheRepoBody = () => <div>
        <ol>
            <li>Open the terminal</li>
            <li>
                Clone the repository from GitHub.
                <pre>
                    <code>
                        git clone https://github.com/getditto/quickstart
                    </code>
                </pre>
            </li>
            <li>
                Navigate to the project directory:
                <pre>
                    <code>
                        cd quickstart
                    </code>
                </pre>
            </li>
        </ol>
    </div>;

## 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](https://git-scm.com/) installed on your machine
* [Node.js](https://nodejs.org/en/download) installed on your machine
* A Ditto [Portal](https://portal.ditto.live) account with a configured Ditto Database (see [Getting SDK Connection Details](/cloud/portal/getting-sdk-connection-details))

<AccordionGroup>
  <Accordion title="Android Specific Prerequisites" icon="android">
    - [Android Studio](https://developer.android.com/studio/install) installed on your machine
    - A physical Android device or Android emulator
  </Accordion>

  <Accordion title="iOS Specific Prerequisites" icon="apple">
    * A macOS machine with the latest version of [Xcode](https://developer.apple.com/xcode/) (16 or later) installed
    * A physical iOS device or iOS simulator
  </Accordion>
</AccordionGroup>

## Get Started

### 1. Clone the Repository

1. Open the terminal
2. Clone the repository from GitHub.
   ```script theme={null}
   git clone https://github.com/getditto/quickstart
   ```
3. Navigate to the React Native project directory:

   ```script theme={null}
   cd quickstart/react-native
   ```

   <Info>
     The quickstart repository contains both `react-native` (CLI) and `react-native-expo` variants. Choose the one that matches your preferred development approach.
   </Info>

### 2. Configure Ditto

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

<QuickstartConfigTitleAndDatabaseIdBody />

#### 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.
   ```shell theme={null}
   cp .env.sample .env
   ```
2. Update the `.env` file with the Database ID and Playground Token from your Ditto Database
   ```shell theme={null}
   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

   <CodeGroup>
     ```shell yarn theme={null}
     yarn install
     ```

     ```shell npm theme={null}
     npm install
     ```

     ```shell pnpm theme={null}
     pnpm install
     ```
   </CodeGroup>
3. Run the Application

   <CodeGroup>
     ```shell iOS theme={null}
     (cd ios && pod install)
     npx react-native run-ios
     ```

     ```shell Android theme={null}
     npx react-native run-android
     ```

     ```shell macOS theme={null}
     (cd macos && pod install)
     npx react-native run-macos
     ```
   </CodeGroup>

### 4. Sync-Data Offline

<QuickstartSyncDataOfflineBody />

## Next Steps

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

## Additional Resources

* [React Native Install Guide](/sdk/latest/install-guides/react-native)
* [React Native Release Notes](/sdk/latest/release-notes/react-native)
* [API Reference](/sdk/latest/api-reference/api-reference)