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.

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.

App lifecycle handling

Expo uses Metro, which resolves the react-native condition in @electric-sql/client's package exports for native builds. This means normal imports automatically use React Native's AppState to pause ShapeStreams while the app is backgrounded and resume with a catch-up request when the app becomes active again.

If you've disabled Metro package exports or use a custom bundler setup, use the explicit @electric-sql/client/react-native entrypoint or pass runtimeVisibility explicitly. See the TypeScript client docs for details and examples.

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.