A module for polyfilling the minimum necessary web APIs for using the Medplum client on React Native
For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release. If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.
For bare React Native projects, you must ensure that you have installed and configured the expo
package before continuing.
npm install @medplum/expo-polyfills
There are currently two major components to this package:
- The polyfills for getting
MedplumClient
working without errors inReact Native
. See: [polyfillMedplumWebAPIs
] - The
ExpoClientStorage
class, which enablesMedplumClient
to persist what is normally stored inLocalStorage
on the web client into a secure storage on a mobile device. Under the hood it uses Expo'sSecureStore
, but abstracts away the complexity of its asynchronous APIs, since theStorage
interface is normally synchronous in nature.
To get full compatibility with the MedplumClient
in React Native, call the polyfillMedplumWebAPIs
in the app root and pass in an ExpoClientStorage
into your MedplumClient
.
If you want to wait to load components until after the MedplumClient
has initialized, you can conditionally render based on the loading
property from the useMedplumContext
hook.
import { MedplumClient } from '@medplum/core';
import { MedplumProvider, useMedplumContext } from '@medplum/react-hooks';
import { polyfillMedplumWebAPIs, ExpoClientStorage } from '@medplum/expo-polyfills';
polyfillMedplumWebAPIs();
const medplum = new MedplumClient({ storage: new ExpoClientStorage() });
function Home(): JSX.Element {
const { loading } = useMedplumContext();
return loading ? <div>Loading...</div> : <div>Loaded!</div>;
}
function App(): JSX.Element {
return (
<MedplumProvider medplum={medplum}>
<Home />
</MedplumProvider>
);
}
When using MedplumClient
with Expo Router
, you will likely need to disable the polyfill for window.location
; Expo Router
provides a polyfill that better interoperates with the package than the Medplum-provided one. See: https://expo.github.io/router/docs/lab/runtime-location#native
To disable the Medplum window.location
polyfill, simply pass the following config to polyfillMedplumWebAPIs
:
polyfillMedplumWebAPIs({ location: false });