This guide provides a step-by-step process to set up your local development environment for the React Native Supabase AI template. Follow the instructions to configure and run the application.

Prerequisites

Before starting the setup, ensure you have the following accounts ready:

We'll need the following to get started:

Expo Go (v52) installed on a physical device
Node.js (v22.14.0) installed
VS Code or any other preferred code editor or IDE installed
A macOS, Linux, or Windows (PowerShell and WSL2) with a terminal window open

Steps for Local Setup

Clone the Repository

Clone the repository to your local machine using git:

git clone git@github.com:usesaaskit/react-native-supabase-ai-template.git

Navigate to the project directory:

cd react-native-supabase-ai-template

Then navigate to the react-native directory:

cd react-native

Install Dependencies

Install the required dependencies using npm (Node package manager):

npm install

Setup Local Supabase

You can use either a local or cloud Supabase environment to run the application locally. We recommend using the local Supabase environment during development.

To set up a local Supabase instance, you need to install Docker. You can install Docker by visiting this link.

Once Docker is installed, run the following command:

npm run supabase:start

First time running Supabase?

If this is your first time setting up Supabase, you don't need to run the following commands: supabase:apply-migration, supabase:types, or supabase:status. You can skip ahead to the next step.

This command will pull Supabase Docker images and run them as containers. Next, apply the migration and generate types:

npm run supabase:apply-migration

Navigate to the supabase directory in template:

cd supabase

Then generate the types:

npm run supabase:types

To get your local Supabase credentials, you can run the following command in the root folder. This will provide the anon key, secret key, API URL, Studio URL, and other configuration information.

npm run supabase:status

Go to the SQL section under Supabase Studio and run this command:

INSERT INTO storage.buckets
  (id, name, public)
VALUES
  ('avatars', 'avatars', true);
 
 
INSERT INTO storage.buckets
  (id, name, public)
VALUES
  ('files', 'files', true);

Set Up Cloud Supabase

If you want to learn how to set up a cloud-based Supabase instance, check out the Production Deployment guide.

Configure env variables

Copy the .env.example file and rename it to .env.local:

  cp .env.example .env.local

Open the .env.local file and fill in the environment variables related to: Supabase API (Admin).

The environment variables will look something like this:

EXPO_PUBLIC_SUPABASE_API_URL= # Use a tunnel URL (e.g., ngrok, Cloudflare Tunnel) when Supabase is running locally.
EXPO_PUBLIC_SUPABASE_ANON_KEY= # The Supabase anon key (obtain it from the Supabase dashboard).
EXPO_PUBLIC_API_BASE_URL= # Use a tunnel URL to expose your local API server (e.g., https://your-tunnel-url).
EXPO_PUBLIC_MOBILE_API_KEY_SECRET= # The secret key for mobile API access (do not expose publicly). Add the same key in the admin directory.

Set Up EXPO_PUBLIC_API_BASE_URL Correctly

Make sure EXPO_PUBLIC_API_BASE_URL points to a running API server from the Admin directory.

For local development, use a tunnel URL (like ngrok or Cloudflare Tunnel to make your server accessible.
If you're running the server locally, ensure it's listening on the correct port (e.g., http://localhost:3000).

If the API isn't reachable, some app features won't work properly.

Start the application

Run the application in development mode:

npm run start

After running the above command:

Start the development server and look for the QR code in the terminal.
Scan it to open the app on your device:
- On Android, use the Expo Go app and select the "Scan QR code" option.
- On iOS, use the default camera app to scan the code.
  Alternatively, you can create a development build for testing.

API (Admin directory)

The API setup must be properly configured and running. Some parts of the application may not function correctly if the API is unavailable, as we rely on specific API endpoints. Additionally, we are directly integrating Supabase with React Native.

You should now see your application running locally. You're all set!

If you want to learn more about Expo, refer to the official Expo documentation

Mobile App Setup