Loro React Native Demo

A collaborative real-time text editor built with Loro and React Native, demonstrating the power of Conflict-free Replicated Data Types (CRDTs) for seamless multi-user collaboration.

🏗️ Architecture

This demo showcases a complete collaborative editing solution:

• Frontend: React Native app using loro-react-native
• Backend: Node.js WebSocket server for real-time synchronization
• CRDT Engine: Loro for conflict-free collaborative editing
• Ephemeral Store: Handles temporary data like cursor positions

🚀 Getting Started

Prerequisites

• Node.js >= 18
• React Native development environment
• iOS Simulator or Android Emulator
• Xcode (for iOS development)
• Android Studio (for Android development)

Installation

1. Clone the repository

   git clone <repository-url>
   cd LoroReactNativeDemo

2. Install dependencies

   npm install
   # or
   pnpm install

3. Install iOS dependencies (iOS only)

   cd ios && pod install && cd ..

Running the Application

1. Start the WebSocket server

   npm run server

   The server will start on port 30026.

2. Start the React Native Metro bundler

   npm start

3. Run on your preferred platform

   For iOS:

   npm run ios

   For Android:

   npm run android

🔗 Related Links

• Loro Documentation
• React Native Documentation
• WebSocket API