React Native

ElectricSQL supports React Native via the @op-engineering/op-sqlite driver.

Dependencies

Add @op-engineering/op-sqlite as a dependency to your app, e.g.:

npm install @op-engineering/op-sqlite

See the op-sqlite documentation for additional steps -- basically you might need to configure the native modules for your target environments.

Polyfills

Electric makes use of the Web Crypto API for UUID generation, which is not available in React Native environments by default. You can provide a polyfill for this to ensure UUID uniqueness guarantees, like react-native-get-random-values:

npm install react-native-get-random-values
npx pod-install # unnecessary if using Expo managed workflow

And in your app's entry point, like App.js the root-level _layout.js if using expo-router:

import 'react-native-get-random-values'
... other imports ...

export default App

Usage

The example below shows how to use the op-sqlite driver with Electric:

import { open as openOPSQLiteConn } from '@op-engineering/op-sqlite'
import { electrify } from 'electric-sql/op-sqlite'

// Import your generated database schema.
import { schema } from './generated/client'

// Define custom configuration if needed
const config = {
  url: 'https://example.com:5133'
}

// Create the op-sqlite database connection.
// The `name` argument is your database file name.
// Changing this will create/use a new local database file.
const dbName = 'electric.db'
const conn = openOPSQLiteConn({ name: dbName })

// Instantiate your electric client.
const electric = await electrify(conn, dbName, schema, promisesEnabled, config)

// Connect to Electric, passing along your authentication token
// See Usage -> Authentication for more details.
await electric.connect('your token')

You can now use the client to read, write and sync data, e.g.:

const { db } = electric

const results = await db.projects.findMany()
console.log(results)

See Usage -> Data access and Integrations -> Frontend for more information.