react-native-supabase-todolist

PowerSync + Supabase React Native Demo: Todo List

Overview

Demo app demonstrating use of the PowerSync SDK for React Native together with Supabase.

This demo uses Sync Streams. Both lists and todos are auto-subscribed.

Run Demo

Prerequisites:

• To run this demo, you need to have properly configured Supabase and PowerSync projects. Follow the instructions in our Supabase<>PowerSync integration guide:
  • Configure Supabase
  • Configure PowerSync
• Follow all the steps until, but not including, Test Everything (Using Our Demo App).
• Deploy the following sync streams configuration to your PowerSync instance:

config:
  edition: 3

streams:
  user_data:
    queries:
      - SELECT * FROM lists WHERE owner_id = auth.user_id()
      - SELECT todos.* FROM todos INNER JOIN lists ON todos.list_id = lists.id WHERE lists.owner_id = auth.user_id()
    auto_subscribe: true

Switch into the demo's directory:

cd demos/react-native-supabase-todolist

Use pnpm to install dependencies:

pnpm install

Set up the Environment variables: Copy the .env file:

cp .env .env.local

And then edit .env.local to insert your credentials for Supabase.

Run on iOS

pnpm ios

Run on Android (see Set Up Your Environment to allow you to develop with Android emulators and iOS simulators).

pnpm android

EAS Build configuration

General information on defining environment variables with Expo can be found here here.

Learn More

Check out the PowerSync SDK for React Native on GitHub - your feedback and contributions are welcome!

To learn more about PowerSync, see the PowerSync docs.