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`,
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.