evoluhq / evolu

A local-first platform designed for privacy, ease of use, and no vendor lock-in
https://evolu.dev
MIT License
1.47k stars 53 forks source link

[Documentation] Evolu (and Effect) require polyfills on React Native. #476

Open samwightt opened 2 months ago

samwightt commented 2 months ago

Evolu (and Effect, I think) both need polyfills in order to function in React Native when used with expo-router or Metro. Polyfills are needed for TextEncoder and TextDecoder, and for crypto.getRandomValues.

This can be fixed by installing expo-crypto and text-encoding, then writing a polyfill.ts like this:

import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions"
import { TextEncoder, TextDecoder } from 'text-encoding'
import { getRandomValues } from 'expo-crypto'

polyfillGlobal("crypto", () => ({ getRandomValues}))
polyfillGlobal('TextEncoder', () => TextEncoder)
polyfillGlobal('TextDecoder', () => TextDecoder)

Then import polyfill.ts before any imports of Evolu.

Also note that in order to satisfy TS, you will need to make a react-native-polyfill.d.ts with the following content:

declare module 'react-native/Libraries/Utilities/PolyfillFunctions' {
    export function polyfillGlobal(name: string, getValue: () => any): void;
}

This should really be added to the documentation as part of the necessary setup in order to get things working with Expo or Metro.

steida commented 2 months ago

I will review it after the new sync and update docs. Thank you!