React Native

Zero has built-in support for React Native and Expo.

Usage is identical to React on the web, except you must provide a kvStore implementation. Choose the storage adapter you prefer:

Copyimport {ZeroProvider} from '@rocicorp/zero/react'
import {expoSQLiteStoreProvider} from '@rocicorp/zero/expo-sqlite'
 
export function RootLayout() {
  return (
    <ZeroProvider
      // ...
      kvStore={
        // On native, use expo-sqlite; on web, use IndexedDB
        Platform.OS !== 'web'
          ? expoSQLiteStoreProvider()
          : 'idb'
      }
    >
      <App />
    </ZeroProvider>
  )
}

For a complete example, see zslack.

To handle a full disk or a database that fails to open, see Storage Failures.

Zero generates the IDs of clients, client groups and connections with crypto.getRandomValues, which React Native's Hermes engine doesn't provide. Install react-native-get-random-values and import it first in your app's entry file:

Copyimport 'react-native-get-random-values'

Without it, Zero falls back to Math.random, which makes the IDs easier to guess, and logs a warning.