React Native

React Native is the best way to run Triplit on a mobile app. The hooks available in the React package are also available in React Native.

Expo

If you are using Expo to setup your React Native project, you can follow these steps to get Triplit up and running.

1. Create an Expo project and install Triplit

Create your expo project:

npx create-expo-app -t expo-template-blank-typescript
 
cd my-app

For more information on setting up an Expo project with typescript see the Expo documentation (opens in a new tab).

Next, install Triplit's packages:

npm i @triplit/client @triplit/react
npm i @triplit/cli --save-dev

2. Update metro.config.js

Some Triplit packages use Package Exports (opens in a new tab), which Metro does not yet support.

To handle these imports, you will need to customize the Metro bundler. If you have not already created a metro.config.js file, please see the Expo docs on properly configuring Metro (opens in a new tab). Once you have created a metro.config.js file, you can add the following code to resolve the exports from the Triplit packages:

const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');
const config = getDefaultConfig(__dirname);
 
// additional configuration steps
 
// Resolve exports from @triplit/db
function customResolver(context, moduleName, platform) {
  if (moduleName.startsWith('@triplit/db/storage')) {
    const suffix = moduleName.replace('@triplit/db/storage', '');
    const basePath = path.dirname(require.resolve('@triplit/db'));
    const filePath = path.join(basePath, `storage`, `${suffix}.js`);
    return {
      filePath: filePath,
      type: 'sourceFile',
    };
  }
  return context.resolveRequest(context, moduleName, platform);
}
config.resolver.resolveRequest = customResolver;
 
module.exports = config;

3. Configure polyfills

Triplit was originally built to run in web browsers, so a few APIs are used in some core packages and dependencies that are not in the ECMAScript spec that Hermes implements. So you will need to add some polyfills to your project. We list some polyfills below, but you may use other packages or write your own.

• crypto.getRandomValues: react-native-get-random-values (opens in a new tab)
• URL: react-native-url-polyfill (opens in a new tab)
• atob / btoa: @react-native-anywhere/polyfill-base64 (opens in a new tab)
• EventTarget: event-target-polyfill (opens in a new tab)
• hasown: hasown (opens in a new tab)

These polyfills should be imported or implemented in your project's entry file so they can be run as early as possible.

import 'react-native-get-random-values';
// ... other polyfills
 
// The rest of your entry file

Bare React Native

The team over at Triplit hasn't had the chance to test out a bare React Native project. Although we don't expect the required steps to be much different than with Expo, there may be differences. If you have set up Triplit in a bare RN project, please let us know how it went!