The free React Native chat template with four swappable backends

// Overview

A free Expo chat app template

// Why use it

Expo Chat Starter vs. building chat from scratch

Chat looks small until you build it: realtime listeners, messages that arrive out of order, failed sends, history that skips a page, and security rules for who can read what. Here is what the template already handles for you.

// Features

Features of this React Native chat template

// Screens

React Native chat screens included

Rows, bubbles and the composer live in src/components/chat.tsx. Every screen reads the semantic light and dark palette in src/theme.

// Backends

Firebase, Supabase, Appwrite or SQLite chat

Set EXPO_PUBLIC_CHAT_BACKEND in .env, fill in that provider's keys, then restart npx expo start.

* react-native-appwrite ships native code, so Appwrite needs a development build: npx expo run:android, npx expo run:ios or eas build --profile development.

// Get started

How to run a React Native chat app in 3 commands

1. 1

   Download or clone

   Grab the ZIP from GitHub or clone the repo, then install packages.

   Terminal

   git clone https://github.com/developermill22/expo-chat-starter.git
   cd expo-chat-starter
   npm install

2. 2

   Create your .env

   The example file defaults to local SQLite, so nothing else is needed to try it.

   Terminal

   cp .env.example .env

3. 3

   Start the app

   Sign in as alex@demo.local and message the Echo Bot, then sign in as priya@demo.local to see it arrive. The password for both is password123.

   Terminal

   npx expo start

4. 4

   Switch to a cloud backend (optional)

   Change the backend, paste that provider's public keys, and restart Expo.

   Terminal

   # .env
   EXPO_PUBLIC_CHAT_BACKEND=supabase
   EXPO_PUBLIC_SUPABASE_URL=https://xyz.supabase.co
   EXPO_PUBLIC_SUPABASE_KEY=your-publishable-key
   
   npx expo start

// Architecture

How the pluggable chat backend works

App code only talks to ChatBackend. src/providers/backend.ts loads the selected adapter and restores the session into a Zustand store. src/hooks/chat.ts streams conversations into TanStack Query, merges realtime messages into an infinite query and handles optimistic sends. Expo Router's Stack.Protected guards redirect between sign-in and the (app) group.

src/backends/
  types.ts        ChatBackend interface + ChatUser, Conversation, Message  ← the contract
  registry.ts     backend id → lazy-loaded adapter
  config.ts       env reading + "missing keys" checks
  shared.ts       helpers shared by every adapter
  sqlite/         expo-sqlite, demo users + Echo Bot
  firebase/       Firebase Auth + Cloud Firestore
  supabase/       Supabase Auth + Postgres (RLS) + Realtime
  appwrite/       Appwrite Auth + TablesDB + Realtime

// Use cases

Who this React Native chat starter is for

// Customize

Customize the template for your app

import { useCurrentUser } from '@/store/session';
import { useConversations, useSendMessage } from '@/hooks/chat';

const me = useCurrentUser();                 // ChatUser
const { data: chats } = useConversations();  // live, most recent first
const { send, retry } = useSendMessage(id);  // send('Hi!') is optimistic

// FAQ

Expo chat template FAQ