React Native

If you want to use Quirks on React Native, after completing the basic installation process defined here, you will need to follow these steps to get started.

Installation

npm install @quirks/react-native

You will also need some additional packages to help with storage and polyfills:

npm install @craftzdog/react-native-buffer react-native-get-random-values react-native-quick-crypto @react-native-community/netinfo @react-native-async-storage/async-storage

If you are using our default configuration, you will also need:

npm install react-native-mmkv

If you are using version v1 of yarn you must manually install the peer dependencies, as this version of yarn does not automatically resolve them.

Setup

Add the Quirks setup import to your index.ts or App.tsx. It must be included in a boot file to ensure that dependencies are correctly imported.

index.ts
import "@quirks/react-native/setup";

Add babel preset:

babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [..., '@quirks/react-native/babel'],
  };
};

Generate config

The generateConfig utility simplifies integration with React Native by automatically creating a setup with all the basic configurations for RN. This setup is optional and can be customized if needed.

App.tsx
import {  } from "@quirks/react-native";
import { ,  } from "@quirks/wallets";
import { ,  } from "@nabla-studio/chain-registry";
import {  } from "@quirks/react";
 
const  = ({
  : [, ],
  : [],
  : [],
  : {
    : {
      : "info",
      : ..,
      : {
        : "Quirks Demo",
        : "Quirks universal dApp demo",
        : "https://www.quirks.nabla.studio/",
        : ["https://avatars.githubusercontent.com/u/37784886"],
      },
    },
  },
});
 
/**
 * Your app entry point
 */
function () {
  return < ={}></>;
}
 
export default ;

Android Fix

There is currently a bug in the react-native-quick-crypto library (which has been recently fixed but not yet released in a new build). To address this issue, you need to import the following configuration into your build.gradle.

android/app/build.gradle
android {
    ...
    packagingOptions {
        pickFirst 'lib/x86/libcrypto.so'
        pickFirst 'lib/x86_64/libcrypto.so'
        pickFirst 'lib/armeabi-v7a/libcrypto.so'
        pickFirst 'lib/arm64-v8a/libcrypto.so'
    }
}

Starter

A starter is available for easy integration here.

On this page