de1mat / powersync-supabase-react-native-todolist-demo

Alpha

This package is currently in an alpha release. Functionality could change dramatically in future releases. Certain functions may be partially implemented or buggy.

PowerSync + Supabase React Native Demo: Todo List App

Demo app demonstrating use of the PowerSync SDK for React Native together with Supabase. For a step-by-step guide, see here.

Running the app

Install the React Native SDK, then:

yarn install

Run on iOS

yarn ios

Run on Android

yarn android

Setup Supabase Project

Create a new Supabase project, and paste an run the contents of database.sql in the Supabase SQL editor.

It does the following:

1. Create lists and todos tables.
2. Create a publication called powersync for lists and todos.
3. Enable row level security, allowing users to only view and edit their own data.
4. Create a trigger to populate some sample data when an user registers.

Setup PowerSync Instance

Create a new PowerSync instance, connecting to the database of the Supabase project.

Then deploy the following sync rules:

bucket_definitions:
  user_lists:
    # Separate bucket per todo list
    parameters: select id as list_id from lists where owner_id = token_parameters.user_id
    data:
      - select * from lists where id = bucket.list_id
      - select * from todos where list_id = bucket.list_id

Configure the app

Copy the AppConfig.template.ts to a usable file

cp library/supabase/AppConfig.template.ts library/supabase/AppConfig.ts

Insert the necessary credentials.