Building a Real-Time Chat App with Instant DB, React Native & Expo SDK 55

Learn how to build a real-time chat application from scratch using React Native with Expo SDK 55 and Instant DB as the backend. You'll learn how to set up the project, installing dependencies, authenticating with Instant, and implementing real-time data updates.

If you want to create a cross-platform chat app with real-time functionality and authentication without relying on AI, this tutorial is for you. It also explains how to use Instant’s CLI tools and sandbox for schema management and query testing.

What's inside

• Introduction to Instant DB as a Firebase alternative
• Creating a new Expo SDK 55 project with bun and Expo CLI
• Authenticating with Instant CLI and managing your Instant account
• Using the Instant sandbox to test queries and manage schema
• Installing Instant React Native SDK and required dependencies
• Simplifying the Expo project and setting up a basic app layout
• Implementing real-time color selection with Instant DB
• Using environment variables to securely manage your Instant app ID

Introduction to Instant DB as a Firebase alternative

Instant DB is introduced as a modern, easier-to-use alternative to Firebase for real-time backend functionality. It works out of the box with React Native and Expo, providing real-time data syncing and authentication features.

I highlight Instant’s open-source nature, generous free tier, and how it integrates seamlessly with React Native projects. It’s the recommended backend when you need real-time features without complex setup.

Creating a new Expo SDK 55 project with bun and Expo CLI

The tutorial starts by creating a new Expo project using bun and the Expo CLI with the @next template to target the unreleased Expo SDK 55. The project is named "real time chat apps" and is quickly scaffolded.

I show how to open the project in VS Code and start the Expo server. It also demonstrates running the app on a physical Android device via Android Studio’s device manager, emphasizing a smooth development workflow.

Authenticating with Instant CLI and managing your Instant account

Before integrating Instant DB, you authenticate using the Instant CLI with npx instant-cli login. This opens a browser to sign in or create a free Instant account.

I explain the free tier limits (1GB database, unlimited API requests, one team member) and the option to self-host Instant since it’s open source. I also show the Instant dashboard with existing projects and how to push schema changes using the CLI.

Using the Instant sandbox to test queries and manage schema

Instant provides a sandbox environment to run and debug queries, transactions, and permissions before implementing them in your app. I demonstrate using the sandbox to verify queries and explains how to restrict attribute creation for production security.

It also mentions the importance of locking down schema permissions and points to Instant’s documentation and Discord community for help with complex use cases.

Installing Instant React Native SDK and required dependencies

I install the instant-react-native package using bun and adds peer dependencies like @react-native-async-storage/async-storage, @react-native-community/netinfo, and react-native-get-random-values.

Since these are JavaScript packages, no native rebuild or dev client is needed, making it compatible with Expo managed workflow. The package JSON is checked to confirm the installations.

Simplifying the Expo project and setting up a basic app layout

The default Expo template includes extra code, so I run a custom reset script (bun reset project) to simplify the project structure. This removes unnecessary files and leaves a minimal stack navigator layout.

The app is refreshed on Android to verify the simplified setup. This clean slate makes it easier to focus on building the chat app features.

Implementing real-time color selection with Instant DB

The demo app uses a simple schema with a single table for colors. Users can pick a color (green, blue, purple, or yellow), and the app updates in real time across devices.

I show how the app ID is instantiated and how real-time updates work automatically with Instant DB. Changing the color immediately reflects on connected clients, demonstrating Instant’s real-time sync capabilities.

Using environment variables to securely manage your Instant app ID

Since the Instant app ID is a client identifier, I recommend not hardcoding it in source code or pushing it to GitHub. Instead, it shows how to create a .env file with EXPO_PUBLIC_INSTANT_APP_ID and reference it in the app.

This approach keeps sensitive info out of version control while allowing the app to access the ID at runtime. It’s a best practice for managing keys in Expo projects.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.