Skip to main content

Installation

Pre-requisites​

  • NodeJS 20+
  • React-Native 0.72.15+

How to install​

NOTE:

The below step is only to be used when you install from a private package manager using an access token.

Create a new file .npmrc at the root directory with the content:​

//registry.npmjs.org/:_authToken=<YOUR_TOKEN>

Note YOUR_TOKEN, which we send to you.

Install Vault SDK and other dependencies​

In your project directory, run:

 yarn add 'shr-vaults@npm:@sharering/shr-vaults@^1.0.0-alpha9' \
          'node-libs-react-native@npm:@sharering/node-libs-react-native@^1.3.1-alpha4' \
          'react-native-quick-crypto@npm:@sharering/react-native-quick-crypto@^0.6.3-alpha4' \
          'shr-react-native-share@npm:@sharering/shr-react-native-share@^8.2.4' \
          @alessiocancian/react-native-actionsheet \
          @bam.tech/react-native-image-resizer@3.0.7 \
          @cosmjs/crypto \
          @react-native-async-storage/async-storage@1.19.3 \
          @react-native-camera-roll/camera-roll \
          @react-native-clipboard/clipboard \
          @react-native-google-signin/google-signin \
          @realm/react \
          @robinbobin/react-native-google-drive-api-wrapper \
          @shareledgerjs/client \
          @shareledgerjs/signing \
          @shareledgerjs/types \
          @shopify/react-native-skia@0.1.225 \
          axios \
          i18next \
          jsrsasign \
          jwk-to-pem@2.0.5 \
          jws \
          lottie-react-native@6.2.0 \
          qs \
          react-dom \
          react-i18next\
          react-native-biometrics@3.0.1 \
          react-native-camera@4.2.1 \
          react-native-cloud-storage@1.5.1 \
          react-native-compressor \
          react-native-config \
          react-native-date-picker \
          react-native-device-info \
          react-native-fast-base64 \
          react-native-fs \
          react-native-gesture-handler@2.21.2 \
          react-native-get-random-values \
          react-native-image-gallery \
          react-native-image-marker@0.6.3 \
          react-native-image-picker@5.0.2 \
          react-native-keychain@8.1.1 \
          react-native-linear-gradient \
          react-native-modal \
          react-native-modals \
          react-native-pdf@6.7.3 \
          react-native-permissions@3.8.4 \
          react-native-qrcode-svg@6.2.0 \
          react-native-sensors \
          react-native-simple-dialogs \
          react-native-svg@13.13.0 \
          react-native-video@5.2.1 \
          react-native-view-shot@3.7.0 \
          react-redux \
          realm@12.6.0 \
          recyclerlistview \
          rn-fetch-blob

or

npm install 'shr-vaults@npm:@sharering/shr-vaults@^1.0.0-alpha9' \ 
            'node-libs-react-native@npm:@sharering/node-libs-react-native@^1.3.1-alpha4' \
            'react-native-quick-crypto@npm:@sharering/react-native-quick-crypto@^0.6.3-alpha4' \
            'shr-react-native-share@npm:@sharering/shr-react-native-share@^8.2.4' \
            @alessiocancian/react-native-actionsheet \
            @bam.tech/react-native-image-resizer@3.0.7 \
            @cosmjs/crypto \
            @react-native-async-storage/async-storage@1.19.3 \
            @react-native-camera-roll/camera-roll \
            @react-native-clipboard/clipboard \
            @react-native-google-signin/google-signin \
            @realm/react \
            @robinbobin/react-native-google-drive-api-wrapper \
            @shareledgerjs/client \
            @shareledgerjs/signing \
            @shareledgerjs/types \
            @shopify/react-native-skia@0.1.225 \
            axios \
            i18next \
            jsrsasign \
            jwk-to-pem@2.0.5 \
            jws \
            lottie-react-native@6.2.0 \
            qs \
            react-dom \
            react-i18next\
            react-native-biometrics@3.0.1 \
            react-native-camera@4.2.1 \
            react-native-cloud-storage@1.5.1 \
            react-native-compressor \
            react-native-config \
            react-native-date-picker \
            react-native-device-info \
            react-native-fast-base64 \
            react-native-fs \
            react-native-gesture-handler@2.21.2 \
            react-native-get-random-values \
            react-native-image-gallery \
            react-native-image-marker@0.6.3 \
            react-native-image-picker@5.0.2 \
            react-native-keychain@8.1.1 \
            react-native-linear-gradient \
            react-native-modal \
            react-native-modals \
            react-native-pdf@6.7.3 \
            react-native-permissions@3.8.4 \
            react-native-qrcode-svg@6.2.0 \
            react-native-sensors \
            react-native-simple-dialogs \
            react-native-svg@13.13.0 \
            react-native-video@5.2.1 \
            react-native-view-shot@3.7.0 \
            react-redux \
            realm@12.6.0 \
            recyclerlistview \
            rn-fetch-blob

Install react navigation​

yarn add @react-navigation/native react-native-screens@3.33.0 react-native-safe-area-context@4.14.0 @react-navigation/native-stack

or

npm install add @react-navigation/native react-native-screens@3.33.0 react-native-safe-area-context@4.14.0 @react-navigation/native-stack

For more information see: react navigation

Due to file-size restriction, you will need to download idengine-module package separately and install it as local package. Please contact ShareRing for the download URL.

yarn add 'idengine-module@file:/path/to/idengine-module.tgz'

or 

npm install 'idengine-module@file:/path/to/idengine-module.tgz'

Config for iOS​

  1. Go to /ios open Podfile and add:
    ......
      pod 'idengine-module', :path => '../node_modules/idengine-module/ios'
    ......
  1. Open your_project.xcworkspace choose tab Signing & Capabilities and add your Keychain group.
  2. Go to /ios/your_project and open Info.plist, then add:

    <key>NSFaceIDUsageDescription</key>
    <string>This app uses Face ID to confirm your identity</string>
  
    <key>NSCameraUsageDescription</key>
    <string>Your own description of the purpose</string>    
    
    <key>NFCReaderUsageDescription</key>
    <string>This will be used for read NFC document</string>
    
    <key>com.apple.developer.nfc.readersession.iso7816.select-identifiers</key>
       <array>
          <string>A0000002471001</string>
          <string>A0000002472001</string>
          <string>00000000000000</string>
       </array>
  1. In Xcode's Signing & Capabilities tab, make sure Near Field Communication Tag Reading capability had been added.
  2. In the <your-project>.entitlement file add:
<dict>
    <key>com.apple.developer.nfc.readersession.formats</key>
    <array>
        <string>TAG</string>
        <string>NDEF</string>
    </array>
    ....
</dict>

If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking:

cd ios && pod install && cd ..
or
npx pod-install ios

Config for Android​

  1. Edit android/app/build.gradle (note: inside app folder) to look like this:
android {
  ...

  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' 
    ...         
  }

  ...
    buildFeatures {
        dataBinding true
    }

    packagingOptions {
        pickFirst 'lib/x86/libc++_shared.so'
        pickFirst 'lib/x86_64/libjsc.so'
        pickFirst 'lib/arm64-v8a/libjsc.so'
        pickFirst 'lib/arm64-v8a/libc++_shared.so'
        pickFirst 'lib/x86_64/libc++_shared.so'
        pickFirst 'lib/armeabi-v7a/libc++_shared.so'
        pickFirst 'lib/arm64-v8a/libcrypto.so'
        pickFirst 'lib/armeabi-v7a/libcrypto.so'
        pickFirst 'lib/x86/libcrypto.so'
        pickFirst 'lib/x86_64/libcrypto.so'
    }
  ...
 configurations.all {
   resolutionStrategy {
      force "org.jetbrains.kotlin:kotlin-stdlib:${rootProject.ext.kotlinVersion}" // or newest
    }
  }
    
}

  1. Edit your android/build.gradle:
buildscript {
      ext {
          buildToolsVersion = "33.0.0"
          minSdkVersion = 21
          compileSdkVersion = 34
          targetSdkVersion = 33
          ndkVersion = "23.1.7779620"
          kotlinVersion = "1.8.22"
        }
      repositories {
        google()
        mavenCentral()
        maven { url "https://jitpack.io" } 
        maven { url "https://maven.google.com" }
      }
        
      dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath 'com.google.gms:google-services:4.4.0'
        classpath ("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
     }
  }
  1. Add this line in AndroidManifest.xml:
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.NFC" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    ...
    <application>
      ...
        <meta-data
            android:name="com.google.android.geo.API_KEY" android:value="YOUR_GOOGLE_API_KEY"
            />
      ...
      <activity android:name="com.smartengines.smartidreader.SmartIDActivity" />
    </applications>
  1. Edit your gradle/wrapper/gradle-wrapper.properties:
    ....
    distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip
    ....

Config for RN​

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

const config = {
    resolver: {
        extraNodeModules: modules.reduce(
          (acc, name) => {
            acc[name] = path.join(__dirname, 'node_modules', name);
            return acc;
          },
          { 
            ...require('node-libs-react-native')
          }
        ),
      },
};

Use with ether.js v5.x​

If you use ether.js v5.x in your app, it's customized version of pbkdf2 for browsers doesn't runs extremely slow on React-Native. Fortunately, there's a workaround:

  1. Create a file pbkdf2.js at root dir:
/**
 * inside file: pbkdf2.js
 * https://github.com/facebook/react-native
 *
 * @format
 */

const crypto = require("react-native-quick-crypto");
exports.pbkdf2 = crypto.pbkdf2Sync;
  1. Update file metro.config.js set resolver.resolveRequest handler:
const config = {
    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);
        },
      },
};

Set 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.

import 'node-libs-react-native/globals'; // <----add this
import 'react-native-get-random-values'; // <----add this
import 'react-native-gesture-handler'; // <----add this
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Last updated on