React Native Replicache

Plug-in React Native compatibility bindings for Replicache.

https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov

Why is this needed?

Replicache enables us to build applications that are performant, offline-capable and collaborative. By default, it uses IndexedDB for client-side persistance. Unfortunately, this technology is not available in React Native and is only supported in web-browsers.

Thankfully, Replicache allows us to provide our own transactional data-store via experimentalCreateKVStore. The goal of this project is to provide some implementations of such a store, along with some guidance in getting up and running with Replicache in React Native.

What are the strategies?

React Native has relatively good support for SQLite - which provides the strict serializable transactions that we require.

Here we provide a store implementation backed by expo-sqlite. However, we also offer more bindings here. Be sure to see what best fits your project!

Any additional considerations?

Some configuration is required to receive poke events from the server. In our example, seen here, we use a polyfill for Server Sent Events. These aren't built into React Native, but are really handy for a demo.

You most likely want to use web-sockets for this. This is relatively trivial with Pusher/Ably etc and similar to the web-app so we won't discuss that further here.

How can I install this?

1. Install the following in your React Native project:
   • yarn add expo-crypto expo-sqlite @react-native-replicache/react-native-expo-sqlite
2. Ensure that you've polyfilled crypto.getRandomValues on the global namespace.
   • See here for an example.
3. Pass in createReplicacheExpoSQLiteExperimentalCreateKVStore to Replicache's experimentalCreateKVStore option.
   • See here for an example.