Expo

Expo is a platform that helps you deploy React Native applications.

Electric and Expo

Expo applications are developed in Javacript (or Typescript) using React Native.

You can use the Electric Typescript client in your Expo applications. This allows you to sync data from Electric into mobile apps.

[!Tip] Need context? See the Deployment guide for more details.

Example

Follow the Expo Quickstart to create an Expo app. Replace the generated ./app/(tabs)/index.tsx with the following:

import { Text } from 'react-native'
import { useShape } from '@electric-sql/react'

// Edit to match your setup.
const ELECTRIC_URL = 'https://my-electric-sync-service.example.com'

export default function HomeScreen() {
  const { isLoading, data } = useShape({
    url: `${ELECTRIC_URL}/v1/shape`,
    params: {
      table: 'items',
    },
  })

  if (isLoading) {
    return null
  }

  return <Text>{JSON.stringify(data, null, 4)}</Text>
}

Install @electric-sql/react (if necessary using --force to work around a React dependency version mismatch):

npm install '@electric-sql/react' --force

Run, e.g. in the browser:

npm run web

If there's data in the items table of your Postgres, you should see it syncing into your app.

PGlite

PGlite doesn't yet work in React Native.

We have an open issue tracking support for it. When it does, we hope to work with the Expo team to get an official expo-pglite package published.