Expo
ElectricSQL supports Expo via both expo-sqlite and expo-sqlite/next.
Dependencies
Add expo-sqlite
as a dependency to your app, e.g.:
npx expo install expo-sqlite
This package includes both the regular and next
drivers. See the expo-sqlite docs or expo-sqlite/next docs for more information.
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
- expo-sqlite
- expo-sqlite/next
import * as SQLite from 'expo-sqlite'
import { electrify } from 'electric-sql/expo'
// Create the expo-sqlite database connection. The first argument
// is your database name. Changing this will create/use a new
// local database file.
const conn = SQLite.openDatabase('electric.db')
import * as SQLite from 'expo-sqlite/next'
import { electrify } from 'electric-sql/expo-next'
// Create the expo-sqlite database connection. The first argument
// is your database name. Changing this will create/use a new
// local database file.
const conn = SQLite.openDatabaseSync('electric.db')
You can now instantiate an Electric client for the database connection and use it to read, write and sync data, e.g.:
// Import your generated database schema.
import { schema } from './generated/client'
// Define custom configuration if needed
const config = { url: 'https://example.com:5133' }
// Instantiate your electric client.
const electric = await electrify(conn, schema, config)
// Connect to Electric, passing along your authentication token
// See Usage -> Authentication for more details.
await electric.connect('your token')
const { db } = electric
const results = await db.projects.findMany()
console.log(results)
See Usage -> Data access and Integrations -> Frontend for more information.