Quirks

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'],
  };
};

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 { generateConfig } from "@quirks/react-native";
import { keplrMobile, leapMobile } from "@quirks/wallets";
import {
  chain as osmosis,
  assets as osmosisAssetList,
} from 'chain-registry/mainnet/osmosis';
import { QuirksConfig } from "@quirks/react";
// ---cut-start---
import * as React from "react";
// ---cut-end---
 
const config = generateConfig({
  wallets: [keplrMobile, leapMobile],
  chains: [osmosis],
  assetsLists: [osmosisAssetList],
  walletConnectOptions: {
    providerOpts: {
      logger: "info",
      projectId: process.env.EXPO_PUBLIC_WC_PROJECT_ID,
      metadata: {
        name: "Quirks Demo",
        description: "Quirks universal dApp demo",
        url: "https://www.quirks.nabla.studio/",
        icons: ["https://avatars.githubusercontent.com/u/37784886"],
      },
    },
  },
});
 
/**
 * Your app entry point
 */
function App() {
  return <QuirksConfig config={config}></QuirksConfig>;
}
 
export default App;

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.

React Native

Installation

Setup

Generate config

Android Fix

Starter

On this page