Using the Orbis SDK with React Native

Using the Orbis SDK requires some additional manual configurations, we created a test repository that you can fork to get started easily, here are some of the steps we performed to get it to work:

Configuration required for React Native

First we need to install some additional packages to replace the libraries that aren't included natively in React Native:

npm i react-native-webcrypto
npm i stream-browserify
npm i @craftzdog/react-native-buffer
npm i core-js
npm i react-native-url-polyfill
npm i text-encoding
npm i js-sha256

Then we can update our babel.config.js file to make it look like this:

module.exports = {
  plugins: [
    [
       'module-resolver',
       {
         alias: {
           'crypto': 'react-native-webcrypto',
           'stream': 'stream-browserify',
           'buffer': '@craftzdog/react-native-buffer'
         },
       },
    ],
  ],
  presets: [['module:metro-react-native-babel-preset', {
    unstable_disableES6Transforms: true
  }]],
}

And finally we can update our metro.config.js file to use this:

const { getDefaultConfig } = require('@expo/metro-config')

module.exports = (async () => {
  const {
    resolver: { sourceExts },
  } = await getDefaultConfig(__dirname)

  return {
    resolver: {
      sourceExts: [...sourceExts, 'cjs', 'mjs'],
    },
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
  }
})()

Using Orbis SDK in your Expo app

Once we did this we can start using the Orbis SDK in our React Native environment, here is how to do this:

/** Import the polyfills required for the Orbis SDK to work */
import '@orbisclub/orbis-sdk/utils/polyfills_light_crypto';

/** Import Orbis SDK */
import { Orbis } from "@orbisclub/orbis-sdk";

/** Initialize the Orbis class object while using AsyncStorage */
let orbis = new Orbis({
  store: 'AsyncStorage'
});

Connecting to Orbis

There are multiple ways to get your users connected to Orbis from a mobile phone:

Using native WalletConnect libraries
Using the WebView to connect to the wallet of your choice
Having users scan a QR code on desktop to share their Ceramic session string with the phone

👈 Installation

API Documentation