Mobile | Sun Mar 30 20258,111 views

Modern Chat App

Hi there! 👋

Learn how to build a real-time multi-user chat app using React Native and Expo with Clerk for Passkeys & Google Sign-In and Appwrite for the backend. Seamless auth, modern UI, real-time updates—everything you need to ship a production-ready chat app.

This project includes a figma design with the UI components. Feel free to use it as a reference or clone it to your own Figma account.

🧙‍♂️ Want to become a React Native master? Check out the React Native Course.

Also, dive into the React with TypeScript Course to master TypeScript, handle payments, and deploy scalable apps. Learn more

Prerequisites

Dependencies

Clerk Authentication

bun add @clerk/clerk-expo @clerk/types @clerk/expo-passkeys
npx expo install expo-secure-store expo-auth-session expo-crypto expo-web-browser expo-build-properties
  • @clerk/clerk-expo: Core Clerk SDK for Expo/React Native apps
  • @clerk/types: TypeScript types for Clerk
  • @clerk/expo-passkeys: Enables passkey (biometric) authentication
  • expo-secure-store: Provides secure storage for tokens
  • expo-auth-session & expo-web-browser: Required for OAuth flows (Google Sign-in)
  • expo-crypto: Handles cryptographic operations
  • expo-build-properties: Configures native build settings

Clerk Configuration

Add to your app.json:

{
  "expo": {
    "ios": {
      "associatedDomains": [
        "applinks:your-clerk-app-link.clerk.accounts.dev",
        "webcredentials:your-clerk-app-link.clerk.accounts.dev"
      ]
    },
    "plugins": [
      "expo-secure-store",
      [
        "expo-build-properties",
        {
          "ios": {
            "deploymentTarget": "16.0" // Required for passkeys
          }
        }
      ]
    ]
  }
}

Appwrite Backend

npx expo install react-native-appwrite react-native-url-polyfill
  • react-native-appwrite: Appwrite SDK for React Native (using v0.7.0 for stability)
  • react-native-url-polyfill: Polyfill for URL handling in React Native

UI Components

npx expo install @legendapp/list
  • @legendapp/list: High-performance virtualized list component for React Native

Environment Variables

Create a .env.local file in the root of your project and add the following variables:

EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=your-key-here
EXPO_PUBLIC_APPWRITE_APP_ID=your-app-write-app-id

Youtube GitHubDownload as Zip