> ## Documentation Index > Fetch the complete documentation index at: https://docs.powersync.com/llms.txt > Use this file to discover all available pages before exploring further. # React Native & Expo SDK > Use PowerSync in React Native (& Expo) apps. This SDK is distributed via NPM Refer to packages/react-native in the powersync-js repo on GitHub Full API reference for the PowerSync SDK Gallery of example projects/demo apps built with React Native and PowerSync. Changelog for the SDK ### 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. ## Using Hooks A separate `powersync-react` package is available containing React hooks for PowerSync. See its README for example code. ## Installation Add the [PowerSync React Native NPM package](https://www.npmjs.com/package/@powersync/react-native) to your project: ```bash theme={null} npx expo install @powersync/react-native ``` ```bash theme={null} yarn expo add @powersync/react-native ``` ``` pnpm expo install @powersync/react-native ``` **Install Peer Dependencies** PowerSync requires a SQLite database adapter. Choose between: [PowerSync OP-SQLite](https://www.npmjs.com/package/@powersync/op-sqlite) offers: * Built-in encryption support via SQLCipher * Smoother transition to React Native's New Architecture ```bash theme={null} npx expo install @powersync/op-sqlite @op-engineering/op-sqlite ``` ```bash theme={null} yarn expo add @powersync/op-sqlite @op-engineering/op-sqlite ``` ``` pnpm expo install @powersync/op-sqlite @op-engineering/op-sqlite ``` The [@journeyapps/react-native-quick-sqlite](https://www.npmjs.com/package/@journeyapps/react-native-quick-sqlite) package is the original database adapter for React Native and therefore more battle-tested in production environments. ```bash theme={null} npx expo install @journeyapps/react-native-quick-sqlite ``` ```bash theme={null} yarn expo add @journeyapps/react-native-quick-sqlite ``` ``` pnpm expo install @journeyapps/react-native-quick-sqlite ``` **iOS with `use_frameworks!`** If your iOS project uses `use_frameworks!`, add the `react-native-quick-sqlite` plugin to your app.json or app.config.js and configure the staticLibrary option: ``` { "expo": { "plugins": [ [ "@journeyapps/react-native-quick-sqlite", { "staticLibrary": true } ] ] } } ``` This plugin automatically configures the necessary build settings for `react-native-quick-sqlite` to work with `use_frameworks!`. **Using Expo Go?** Our native database adapters listed below (OP-SQLite and React Native Quick SQLite) are not compatible with Expo Go's sandbox environment. To run PowerSync with Expo Go install our JavaScript-based adapter `@powersync/adapter-sql-js` instead. See details [here](/client-sdks/frameworks/expo-go-support). **Polyfills and additional notes:** * For async iterator support with watched queries, additional polyfills are required. See the [Babel plugins section](https://www.npmjs.com/package/@powersync/react-native#babel-plugins-watched-queries) in the README. * When using the **OP-SQLite** package, we recommend adding this [metro config](https://github.com/powersync-ja/powersync-js/tree/main/packages/react-native#metro-config-optional) to avoid build issues. ## Getting Started **Prerequisites**: To sync data between your client-side app and your backend source database, you must have completed the necessary setup for PowerSync, which includes connecting your source database to the PowerSync Service and deploying Sync Streams (or legacy Sync Rules) (steps 1-4 in the [Setup Guide](/intro/setup-guide)). ### 1. Define the Client-Side Schema The first step is to define the client-side schema, which refers to the schema for the managed SQLite database exposed by the PowerSync Client SDKs, that your app can read from and write to. The client-side schema is typically mainly derived from your backend source database schema and your [Sync Streams](/sync/streams/overview) (or legacy [Sync Rules](/sync/rules/overview)), but can also include other tables such as local-only tables. Note that schema migrations are not required on the SQLite database due to the schemaless nature of the [PowerSync protocol](/architecture/powersync-protocol): schemaless data is synced to the client-side SQLite database, and the client-side schema is then applied to that data using *SQLite views* to allow for structured querying of the data. The schema is applied when the local PowerSync database is constructed (as we'll show in the next step). **Generate schema automatically** In the [PowerSync Dashboard](https://dashboard.powersync.com/), select your project and instance and click the **Connect** button in the top bar to generate the client-side schema in your preferred language. The schema will be generated based off your Sync Streams/Rules. Similar functionality exists in the [CLI](/tools/cli). **Note:** The generated schema will not include an `id` column, as the client SDK automatically creates an `id` column of type `text`. Consequently, it is not necessary to specify an `id` column in your schema. For additional information on IDs, refer to [Client ID](/sync/advanced/client-id). The types available are `text`, `integer` and `real`. These should map directly to the values produced by your [Sync Streams](/sync/streams/overview) (or legacy [Sync Rules](/sync/rules/overview)). If a value doesn't match, it is cast automatically. For details on how backend source database types are mapped to the SQLite types, see [Types](/sync/types). **Example**: **Note**: No need to declare a primary key `id` column - as PowerSync will automatically create this. ```typescript powersync/AppSchema.ts theme={null} 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; export type ListRecord = Database['lists']; ``` ### 2. Instantiate the PowerSync Database Next, you need to instantiate the PowerSync database. PowerSync streams changes from your backend source database into the client-side SQLite database, based on your [Sync Streams](/sync/streams/overview) (or legacy [Sync Rules](/sync/rules/overview)). In your client-side app, you can read from and write to the local SQLite database, whether the user is online or offline. **Example**: For getting started and testing PowerSync use the [@journeyapps/react-native-quick-sqlite](https://github.com/powersync-ja/react-native-quick-sqlite) package. By default, this SDK requires @journeyapps/react-native-quick-sqlite as a peer dependency. ```typescript powersync/system.ts theme={null} 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](https://www.npmjs.com/package/@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. ```typescript powersync/system.ts theme={null} 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](https://powersync-ja.github.io/powersync-js/react-native-sdk/classes/RNQSPowerSyncDatabaseOpenFactory) syntax to instantiate the database. Once you've instantiated your PowerSync database, call the [connect()](https://powersync-ja.github.io/powersync-js/react-native-sdk/classes/AbstractPowerSyncDatabase#connect) method to sync data with your backend. **Note**: This section assumes you want to use PowerSync to sync your backend source database with SQLite in your app. If you only want to use PowerSync to manage your local SQLite database without sync, instantiate the PowerSync database without calling `connect()` and refer to our [Local-Only](/client-sdks/advanced/local-only-usage) guide. ```typescript powersync/system.ts theme={null} 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: 1. Retrieve an auth token to connect to the PowerSync instance. 2. Upload client-side writes to your backend API. Any writes that are made to the SQLite database are placed into an upload queue by the PowerSync Client SDK and automatically uploaded to your app backend (where you apply those changes to the backend source database) when the user is connected. Accordingly, the connector must implement two methods: 1. [PowerSyncBackendConnector.fetchCredentials](https://github.com/powersync-ja/powersync-js/blob/ed5bb49b5a1dc579050304fab847feb8d09b45c7/packages/common/src/client/connection/PowerSyncBackendConnector.ts#L16) - This method is automatically invoked by the PowerSync Client SDK to obtain authentication credentials. The SDK caches credentials internally and only calls this method when needed (e.g. on initial connection or when the token is near expiry). See [When `fetchCredentials()` is Called](/configuration/app-backend/client-side-integration#when-fetchcredentials-is-called) for details, and [Authentication Setup](/configuration/auth/overview) for instructions on how the credentials should be generated. 2. [PowerSyncBackendConnector.uploadData](https://github.com/powersync-ja/powersync-js/blob/ed5bb49b5a1dc579050304fab847feb8d09b45c7/packages/common/src/client/connection/PowerSyncBackendConnector.ts#L24) - This method will be automatically invoked by the PowerSync Client SDK whenever it needs to upload client-side writes to your app's backend API. You need to implement how those writes are processed and uploaded in this method. See [When `uploadData()` is Called](/configuration/app-backend/client-side-integration#when-uploaddata-is-called) for details on triggers, throttling, and retry behavior, and [Writing Client Changes](/handling-writes/writing-client-changes) for considerations on the app backend implementation. **Example**: ```typescript powersync/Connector.ts theme={null} import { PowerSyncBackendConnector, AbstractPowerSyncDatabase, 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/configuration/auth/custom */ 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/configuration/auth/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-sdks/reference/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](#fetching-a-single-item) - get (`SELECT`) a single row from a table. * [PowerSyncDatabase.getAll](#querying-items-powersync-getall) - get (`SELECT`) a set of rows from a table. * [PowerSyncDatabase.watch](#watching-queries-powersync-watch) - execute a read query every time source tables are modified. * [PowerSyncDatabase.execute](#mutations-powersync-execute) - execute a write (`INSERT`/`UPDATE`/`DELETE`) query. ### Fetching a Single Item The [get](https://powersync-ja.github.io/powersync-js/react-native-sdk/classes/PowerSyncDatabase#get) method executes a read-only (`SELECT`) query and returns a single result. It throws an exception if no result is found. Use [getOptional](https://powersync-ja.github.io/powersync-js/react-native-sdk/classes/PowerSyncDatabase#getoptional) to return a single optional result (returns `null` if no result is found). ```js TodoItemWidget.jsx theme={null} 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 {error || todoItem.description} } ``` ### Querying Items (`PowerSync.getAll`) The [getAll](https://powersync-ja.github.io/powersync-js/react-native-sdk/classes/PowerSyncDatabase#getall) method returns a set of rows from a table. ```js ListsWidget.jsx theme={null} 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 ( ({key: list.id, ...list}))} renderItem={({item}) => {item.name}} />) } ``` ### Watching Queries (`PowerSync.watch`) The [watch](https://powersync-ja.github.io/powersync-js/react-native-sdk/classes/PowerSyncDatabase#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. ```javascript theme={null} async function* pendingLists(): AsyncIterable { for await (const result of db.watch( `SELECT * FROM lists WHERE state = ?`, ['pending'] )) { yield result.rows?._array ?? []; } } ``` ```javascript theme={null} const pendingLists = (onResult: (lists: any[]) => void): void => { db.watch( 'SELECT * FROM lists WHERE state = ?', ['pending'], { onResult: (result: any) => { onResult(result.rows?._array ?? []); } } ); } ``` For advanced watch query features like incremental updates and differential results, see [Live Queries / Watch Queries](/client-sdks/watch-queries). ### Mutations (`PowerSync.execute`) The [execute](https://powersync-ja.github.io/powersync-js/react-native-sdk/classes/PowerSyncDatabase#execute) method can be used for executing single SQLite write statements. ```js ListsWidget.jsx theme={null} 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 ( ({key: list.id, ...list}))} renderItem={({item}) => ( {item.name}