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:

tsx
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):

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

Run, e.g. in the browser:

shell
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.