Skip to main content

React-Native projects

When using React-Native, we're going to run in a JavaScript engine (either Hermes, JavaScriptCore or V8), which means we can run ShareledgerJS with some polyfills help.

node-libs-react-native​

This package provides React Native compatible implementations of some Node core modules like stream and crypto. This is actually a fork of the original one with the following tweaks:

For more information, refer to it's README.

caution

If you're a rn-nodeify user, make sure you uninstall it and remove any irrelevant shims.

Installation​

npm i 'node-libs-react-native@git+ssh://github.com/alexdonh/node-libs-react-native.git#v1.3.1'
or 
yarn add 'node-libs-react-native@git+ssh://github.com/alexdonh/node-libs-react-native.git#v1.3.1'

Automatic linking​

Due to React-Native limitation, automatic linking for dependencies is only available in the App's package.json. Therefore, we need to install some peer dependencies to get automatic linking working.

npm i react-native-quick-crypto react-native-fast-base64 react-native-get-random-values
or
yarn add react-native-quick-crypto react-native-fast-base64 react-native-get-random-values

iOS​

Run pod install in ios directory.

Android​

No action needed.

React Native Packager​

Modify metro.config.js file in the root directory of your React Native project to something like:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const path = require('path');
const pak = require('./package.json');

const modules = Object.keys({
  ...pak.peerDependencies,
});

module.exports = {
  resolver: {
    extraNodeModules: modules.reduce(
      (acc, name) => {
        acc[name] = path.join(__dirname, 'node_modules', name);
        return acc;
      },
      { 
        ...require('node-libs-react-native')
      }
    ),
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

Use with ether.js v5.x​

If you use ether.js v5.x in your app, its customized version of pbkdf2 for browsers runs extremely slow. Fortunately there's a workaround:

Create a pbkdf2.js at root dir:

const crypto = require("react-native-quick-crypto");
exports.pbkdf2 = crypto.pbkdf2Sync;

In metro.config.js set resolver.resolveRequest handler:

module.exports = {
  resolver: {
    ...
    resolveRequest: (context, moduleName, platform) => {
      if (moduleName.startsWith('@ethersproject/pbkdf2')) {
        return {
          filePath: require.resolve('./pbkdf2.js'),
          type: 'sourceFile',
        };
      }
      // Optionally, chain to the standard Metro resolver.
      return context.resolveRequest(context, moduleName, platform);
    }
  }
  ...
}

Globals​

Node has certain globals that modules may expect, such as Buffer or process. React-Native does not provide these globals. The node-libs-react-native/globals module in this package will shim the global environment to add these globals. Just require (or import) this module in your app before anything else.

require('node-libs-react-native/globals');
Last updated on