React Native & Expo

PowerSync SDK on NPM

This SDK is distributed via NPM [External link].

Source Code

Refer to packages/react-native in the powersync-js repo on GitHub.

API Reference

Full API reference for the PowerSync SDK [External link].

Example Projects

Gallery of example projects/demo apps built with React Native and PowerSync.

SDK Features

Real-time streaming of database changes: Changes made by one user are instantly streamed to all other users with access to that data. This keeps clients automatically in sync without manual polling or refresh logic.
Direct access to a local SQLite database: Data is stored locally, so apps can read and write instantly without network calls. This enables offline support and faster user interactions.
Asynchronous background execution: The SDK performs database operations in the background to avoid blocking the application’s main thread. This means that apps stay responsive, even during heavy data activity.
Query subscriptions for live updates: The SDK supports query subscriptions that automatically push real-time updates to client applications as data changes, keeping your UI reactive and up to date.
Automatic schema management: PowerSync syncs schemaless data and applies a client-defined schema using SQLite views. This architecture means that PowerSync SDKs can handle schema changes gracefully without requiring explicit migrations on the client-side.

Installation

PowerSync is not compatible with Expo Go. PowerSync uses a native plugin and is therefore only compatible with Expo Dev Builds.

Add the PowerSync React Native NPM package to your project:

npx expo install @powersync/react-native

Required peer dependencies

This SDK requires @journeyapps/react-native-quick-sqlite as a peer dependency. Install it as follows:

npx expo install @journeyapps/react-native-quick-sqlite

Alternatively, you can install OP-SQLite from the PowerSync OP-SQLite package (currently in alpha) which offers built-in encryption support via SQLCipher and a smoother transition to React Native’s New Architecture.

Polyfills and additional notes:

For async iterator support with watched queries additional polyfills are required. See the Babel plugins section in the README.
By default, this SDK connects to a PowerSync instance via WebSocket (from @powersync/react-native@1.11.0) or HTTP Streaming (before @powersync/react-native@1.11.0). See Developer Notes for more details on connection methods and platform-specific requirements.

Getting Started

Before implementing the PowerSync SDK in your project, make sure you have completed these steps:

Signed up for a PowerSync Cloud account (here) or self-host PowerSync.
Configured your backend database and connected it to your PowerSync instance.
Installed the PowerSync React Native SDK.

1. Define the Schema

The first step is defining the schema for the local SQLite database.

This schema represents a “view” of the downloaded data. No migrations are required — the schema is applied directly when the PowerSync database is constructed (as we’ll show in the next step).

Generate schema automatically

In the dashboard, the schema can be generated based off your sync rules by right-clicking on an instance and selecting Generate client-side schema.

Similar functionality exists in the CLI.

The types available are text, integer and real. These should map directly to the values produced by the Sync Rules. If a value doesn’t match, it is cast automatically. For details on how Postgres types are mapped to the types below, see the section on Types in the Sync Rules documentation.

Example:

Note: No need to declare a primary key id column - as PowerSync will automatically create this.

powersync/AppSchema.ts
import { column, Schema, Table } from '@powersync/react-native';

const lists = new Table({
  created_at: column.text,
  name: column.text,
  owner_id: column.text
});

const todos = new Table(
  {
    list_id: column.text,
    created_at: column.text,
    completed_at: column.text,
    description: column.text,
    created_by: column.text,
    completed_by: column.text,
    completed: column.integer
  },
  { indexes: { list: ['list_id'] } }
);

export const AppSchema = new Schema({
  todos,
  lists
});

// For types
export type Database = (typeof AppSchema)['types'];
export type TodoRecord = Database['todos'];
// OR:
// export type Todo = RowType<typeof todos>;
export type ListRecord = Database['lists'];

2. Instantiate the PowerSync Database

Next, you need to instantiate the PowerSync database — this is the core managed database.

Its primary functions are to record all changes in the local database, whether online or offline. In addition, it automatically uploads changes to your app backend when connected.

Example:

For getting started and testing PowerSync use the @journeyapps/react-native-quick-sqlite package.

By default, this SDK requires @journeyapps/react-native-quick-sqlite as a peer dependency.

powersync/system.ts
import { PowerSyncDatabase } from '@powersync/react-native';
import { AppSchema } from './Schema';

export const powersync = new PowerSyncDatabase({
    // The schema you defined in the previous step
    schema: AppSchema,
    // For other options see,
    // https://powersync-ja.github.io/powersync-js/web-sdk/globals#powersyncopenfactoryoptions
    database: {
        // Filename for the SQLite database — it's important to only instantiate one instance per file.
        // For other database options see,
        // https://powersync-ja.github.io/powersync-js/web-sdk/globals#sqlopenoptions
        dbFilename: 'powersync.db'
    }
});

For getting started and testing PowerSync use the @journeyapps/react-native-quick-sqlite package.

By default, this SDK requires @journeyapps/react-native-quick-sqlite as a peer dependency.

powersync/system.ts
import { PowerSyncDatabase } from '@powersync/react-native';
import { AppSchema } from './Schema';

export const powersync = new PowerSyncDatabase({
    // The schema you defined in the previous step
    schema: AppSchema,
    // For other options see,
    // https://powersync-ja.github.io/powersync-js/web-sdk/globals#powersyncopenfactoryoptions
    database: {
        // Filename for the SQLite database — it's important to only instantiate one instance per file.
        // For other database options see,
        // https://powersync-ja.github.io/powersync-js/web-sdk/globals#sqlopenoptions
        dbFilename: 'powersync.db'
    }
});

If you want to include encryption with SQLCipher use the @powersync/op-sqlite package.

If you’ve already installed @journeyapps/react-native-quick-sqlite, You will have to uninstall it and then install both @powersync/op-sqlite and it’s peer dependency @op-engineering/op-sqlite to use this.

powersync/system.ts
import { PowerSyncDatabase } from '@powersync/react-native';
import { OPSqliteOpenFactory } from '@powersync/op-sqlite'; // Add this import
import { AppSchema } from './Schema';

// Create the factory
const opSqlite = new OPSqliteOpenFactory({
    dbFilename: 'powersync.db'
});

export const powersync = new PowerSyncDatabase({
    // For other options see,
    schema: AppSchema,
    // Override the default database
    database: opSqlite
});

SDK versions lower than 1.8.0

In SDK versions lower than 1.8.0, you will need to use the deprecated RNQSPowerSyncDatabaseOpenFactory syntax to instantiate the database.

Once you’ve instantiated your PowerSync database, you will need to call the connect() method to activate it.

powersync/system.ts
import { Connector } from './Connector';

export const setupPowerSync = async () => {
  // Uses the backend connector that will be created in the next section
  const connector = new Connector();
  powersync.connect(connector);
};

3. Integrate with your Backend

The PowerSync backend connector provides the connection between your application backend and the PowerSync client-slide managed SQLite database.

It is used to:

Retrieve an auth token to connect to the PowerSync instance.
Apply local changes on your backend application server (and from there, to Postgres)

Accordingly, the connector must implement two methods:

PowerSyncBackendConnector.fetchCredentials - This is called every couple of minutes and is used to obtain credentials for your app backend API. -> See Authentication Setup for instructions on how the credentials should be generated.
PowerSyncBackendConnector.uploadData - Use this to upload client-side changes to your app backend. -> See Writing Client Changes for considerations on the app backend implementation.

Example:

powersync/Connector.ts
import { PowerSyncBackendConnector, UpdateType  } from "@powersync/react-native"

export class Connector implements PowerSyncBackendConnector {
  /**
  * Implement fetchCredentials to obtain a JWT from your authentication service.
  * See https://docs.powersync.com/installation/authentication-setup
  * If you're using Supabase or Firebase, you can re-use the JWT from those clients, see:
  * https://docs.powersync.com/installation/authentication-setup/supabase-auth
  * https://docs.powersync.com/installation/authentication-setup/firebase-auth
  */
  async fetchCredentials() {
    return {
      // The PowerSync instance URL or self-hosted endpoint
      endpoint: 'https://xxxxxx.powersync.journeyapps.com',
      /**
      * To get started quickly, use a development token, see:
      * Authentication Setup https://docs.powersync.com/installation/authentication-setup/development-tokens) to get up and running quickly
      */
      token: 'An authentication token'
    };
  }

  /**
  * Implement uploadData to send local changes to your backend service.
  * You can omit this method if you only want to sync data from the database to the client
  * See example implementation here:https://docs.powersync.com/client-sdk-references/react-native-and-expo#3-integrate-with-your-backend
  */
  async uploadData(database: AbstractPowerSyncDatabase) {

    /**
    * For batched crud transactions, use data.getCrudBatch(n);
    * https://powersync-ja.github.io/powersync-js/react-native-sdk/classes/SqliteBucketStorage#getcrudbatch
    */
    const transaction = await database.getNextCrudTransaction();

    if (!transaction) {
      return;
    }

    for (const op of transaction.crud) {
      // The data that needs to be changed in the remote db
      const record = { ...op.opData, id: op.id };
      switch (op.op) {
        case UpdateType.PUT:
          // TODO: Instruct your backend API to CREATE a record
          break;
        case UpdateType.PATCH:
          // TODO: Instruct your backend API to PATCH a record
          break;
        case UpdateType.DELETE:
          //TODO: Instruct your backend API to DELETE a record
          break;
      }
    }

    // Completes the transaction and moves onto the next one
    await transaction.complete();
  }
}

Using PowerSync: CRUD functions

Once the PowerSync instance is configured you can start using the SQLite DB functions.

The most commonly used CRUD functions to interact with your SQLite data are:

PowerSyncDatabase.get - get (SELECT) a single row from a table.
PowerSyncDatabase.getAll - get (SELECT) a set of rows from a table.
PowerSyncDatabase.watch - execute a read query every time source tables are modified.
PowerSyncDatabase.execute - execute a write (INSERT/UPDATE/DELETE) query.

Fetching a Single Item

The get method executes a read-only (SELECT) query and returns a single result. It throws an exception if no result is found. Use getOptional to return a single optional result (returns null if no result is found).

TodoItemWidget.jsx
import { Text } from 'react-native';
import { powersync } from "../powersync/system";

export const TodoItemWidget = ({id}) => {
    const [todoItem, setTodoItem] = React.useState([]);
    const [error, setError] = React.useState([]);

    React.useEffect(() => {
        // .get returns the first item of the result. Throws an exception if no result is found.
        powersync.get('SELECT * from todos WHERE id = ?', [id])
          .then(setTodoItem)
          .catch(ex => setError(ex.message))
    }, []);

    return <Text>{error || todoItem.description}</Text>
}

Querying Items (PowerSync.getAll)

The getAll method returns a set of rows from a table.

ListsWidget.jsx
import { FlatList, Text} from 'react-native';
import { powersync } from "../powersync/system";

export const ListsWidget = () => {
    const [lists, setLists] = React.useState([]);

    React.useEffect(() => {
        powersync.getAll('SELECT * from lists').then(setLists)
    }, []);

    return (<FlatList
        data={lists.map(list => ({key: list.id, ...list}))}
        renderItem={({item}) => <Text>{item.name}</Text>}
    />)
}

Watching Queries (PowerSync.watch)

The watch method executes a read query whenever a change to a dependent table is made. It can be used with an AsyncGenerator, or with a callback.

ListsWidget.jsx
import { FlatList, Text } from 'react-native';
import { powersync } from "../powersync/system";

export const ListsWidget = () => {
    const [lists, setLists] = React.useState([]);

    React.useEffect(() => {
        const abortController = new AbortController();

        // Option 1: Use with AsyncGenerator
        (async () => {
          for await(const update of powersync.watch('SELECT * from lists', [], {signal: abortController.signal})) {
              setLists(update)
          }
        })();

        // Option 2: Use a callback (available since version 1.3.3 of the SDK)
        powersync.watch('SELECT * from lists', [], { onResult: (result) => setLists(result) }, { signal: abortController.signal });

        return () => {
            abortController.abort();
        }
    }, []);

    return (<FlatList
        data={lists.map(list => ({ key: list.id, ...list }))}
        renderItem={({ item }) => <Text>{item.name}</Text>}
    />)
}

Mutations (PowerSync.execute)

The execute method can be used for executing single SQLite write statements.

ListsWidget.jsx
import { Alert, Button, FlatList, Text, View } from 'react-native';
import { powersync } from "../powersync/system";

export const ListsWidget = () => {
  // Populate lists with one of methods listed above
  const [lists, setLists] = React.useState([]);

  return (
    <View>
      <FlatList
        data={lists.map(list => ({key: list.id, ...list}))}
        renderItem={({item}) => (<View>
          <Text>{item.name}</Text>
           <Button
              title="Delete"
              onPress={async () => {
                  try {
                    await powersync.execute(`DELETE FROM lists WHERE id = ?`, [item.id])
                    // Watched queries should automatically reload after mutation
                  } catch (ex) {
                    Alert('Error', ex.message)
                  }
                }}
            />
        </View>)}
      />
      <Button
        title="Create List"
        color="#841584"
        onPress={async () => {
            try {
              await powersync.execute('INSERT INTO lists (id, created_at, name, owner_id) VALUES (uuid(), datetime(), ?, ?) RETURNING *', [
                'A list name',
                "[The user's uuid]"
              ])
              // Watched queries should automatically reload after mutation
            } catch (ex) {
              Alert.alert('Error', ex.message)
            }
          }}
      />
    </View>
    )
}

Additional Usage Examples

See Usage Examples for further examples of the SDK.

Developer Notes

Connection Methods

This SDK supports two methods for streaming sync commands:

WebSocket (Default)
- The implementation leverages RSocket for handling reactive socket streams.
- Back-pressure is effectively managed through client-controlled command requests.
- Sync commands are transmitted efficiently as BSON (binary) documents.
- This method is recommended since it will support the future BLOB column support feature.
HTTP Streaming (Legacy)
- This is the original implementation method.
- This method will not support the future BLOB column feature.

By default, the PowerSyncDatabase.connect() method uses WebSocket. You can optionally specify the connectionMethod to override this:

// WebSocket (default)
powerSync.connect(connector);

// HTTP Streaming
powerSync.connect(connector, { connectionMethod: SyncStreamConnectionMethod.HTTP });

Android: Flipper network plugin for HTTP Streams

Not needed when using websockets, which is the default since @powersync/react-native@1.11.0.

If you are connecting to PowerSync using HTTP Streams, you require additional configuration on Android. React Native does not support streams out of the box, so we use the polyfills mentioned. There is currently an open issue where the Flipper network plugin does not allow Stream events to fire. This plugin needs to be disabled in order for HTTP streams to work.

If you are using Java (Expo < 50):

Uncomment the following from android/app/src/debug/java/com/<ProjectName>/ReactNativeFlipper.java

// NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
// NetworkingModule.setCustomClientBuilder(
//     new NetworkingModule.CustomClientBuilder() {
//       @Override
//       public void apply(OkHttpClient.Builder builder) {
//         builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
//       }
//     });
// client.addPlugin(networkFlipperPlugin);

Disable the dev client network inspector android/gradle.properties

# Enable network inspector
EX_DEV_CLIENT_NETWORK_INSPECTOR=false

If you are using Kotlin (Expo > 50):

Comment out the following from onCreate in android/app/src/main/java/com/<ProjectName>/example/MainApplication.kt

// if (BuildConfig.DEBUG) {
//   ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
// }

iOS: use_frameworks and react-native-quick-sqlite

Using use_frameworks (for example, because you are using Google Analytics or Firebase Analytics) will silently break the compilation process of react-native-quick-sqlite on iOS and results in the PowerSync SQLite extension not loading correctly. To solve this, add this to your Podfile:

pre_install do |installer|
    installer.pod_targets.each do |pod|
      next unless pod.name.eql?('react-native-quick-sqlite')

      def pod.build_type
        Pod::BuildType.static_library
      end
    end
end

Development on iOS simulator

Testing offline mode on an iOS simulator by disabling the host machine’s entire internet connection will cause the device to remain offline even after the internet connection has been restored. This issue seems to affect all network requests in an application.

ORM Support

See JavaScript ORM Support for details.

Troubleshooting

See Troubleshooting for pointers to debug common issues.

Client SDKs

PowerSync SDK on NPM

Source Code

API Reference

Example Projects

​SDK Features

​Installation

​Getting Started

​1. Define the Schema

​2. Instantiate the PowerSync Database

​3. Integrate with your Backend

​Using PowerSync: CRUD functions

​Fetching a Single Item

​Querying Items (PowerSync.getAll)

​Watching Queries (PowerSync.watch)

​Mutations (PowerSync.execute)

​Additional Usage Examples

​Developer Notes

​Connection Methods

​Android: Flipper network plugin for HTTP Streams

​iOS: use_frameworks and react-native-quick-sqlite

​Development on iOS simulator

​ORM Support

​Troubleshooting

SDK Features

Installation

Getting Started

1. Define the Schema

2. Instantiate the PowerSync Database

3. Integrate with your Backend

Using PowerSync: CRUD functions

Fetching a Single Item

Querying Items (PowerSync.getAll)

Watching Queries (PowerSync.watch)

Mutations (PowerSync.execute)

Additional Usage Examples

Developer Notes

Connection Methods

Android: Flipper network plugin for HTTP Streams

iOS: use_frameworks and react-native-quick-sqlite

Development on iOS simulator

ORM Support

Troubleshooting