PowerSync + Supabase React Native Demo: Todo List

Note: Alpha Release

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

Overview

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

A step-by-step guide on Supabase<>PowerSync integration is available here. (Note: This guide is currently written for Flutter apps; it will be updated for React Native soon)

Running the App

Install the React Native SDK, then:

yarn install

Run on iOS

yarn ios

Run on Android

yarn android

Set up Supabase Project

Create a new Supabase project, and paste and 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.

Set up 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.