Quickstart

Navigate to or create your application. For example, create a React Native app:

npx react-native init ElectricExample
cd ElectricExample

Install

Install the electric-sql client library and your SQLite driver of choice, for example the react-native-sqlite-storage library:

yarn add electric-sql
yarn add react-native-sqlite-storage
cd ios && pod install && cd ..

Install the ElectricSQL CLI tool, for example using Homebrew (see the installation guide for more options):

brew install electric-sql/tap/electric

Bundle

Use the CLI tool to initialise migrations (see the migrations guide for more information):

electric migrations init

You can now bundle the migrations for your app:

electric migrations build --bundle

Configure

Sign up and create an application and copy the unique app slug that’s presented to you at the end of the provisioning flow.

Then in your app code, import the bundled migrations and pass them in alongside the app slug when configuring your database driver:

import { data } from '../migrations'

const config = {
  app: '<YOUR APP SLUG>',
  migrations: data.migrations
}

SQLite.openDatabase('example.db')
  .then((db) => electrify(db, true, config))
  .then((db) => /* use db as normal */)

Develop

You can now use the electrified db instance just as you would the standard database client, for example:

db.transaction((tx) => {
  tx.executeSql('INSERT INTO items VALUES(?)', ['foo'])
})

And with ElectricSQL’s reactive hooks and queries, for example:

const ExampleComponent = () => {
  const { results } = useElectricQuery('SELECT value FROM items', [])

  return (
    <View>
      {results.map((item, index) => (
        <Text key={ index } style={styles.item}>
          Item: { item.value }
        </Text>
      ))}
  )
}

Data changes will be automatically detected. Components will re-render whenever any relevant data is changed or when new data comes in over the replication stream.

Sync

Use the electric migrations sync command to sync migrations with the server:

electric migrations sync --app $APP_SLUG

Data replication will start automatically once your local app and replication service are synchronised with the same schema version.

Next steps

For more information see the guides on:

There are also example applications on GitHub.