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.

Prerequisites

• Clerk Account
• Appwrite Account
• Apple Team ID (for passkeys on iOS)

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

Links