Skip to main content

Installation

Pre-requisites​

  • NodeJS 14+
  • React-Native 0.65+

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'
            'shr-react-native-google-places@npm:@sharering/shr-react-native-google-places@3.1.3' \
            'shr-nfc-document-reader@npm:@sharering/shr-nfc-document-reader@^1.0.1' \
            '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' \
            realm \
            @realm/react \
            react-native-qrcode-svg \
            jsrsasign \
            react-native-sensors \
            @shopify/react-native-skia \
            @react-native-async-storage/async-storage \
            @shareledgerjs/client \
            @shareledgerjs/signing \
            @shareledgerjs/types \
            i18next \
            react-i18next \
            react-native-camera \
            react-native-date-picker \
            react-native-device-info \
            react-native-fast-base64 \
            react-native-fs \
            react-native-geolocation-service \
            react-native-get-random-values \
            react-native-image-marker \
            react-native-image-picker \
            @bam.tech/react-native-image-resizer \
            react-native-keychain \
            react-native-linear-gradient \
            react-native-qr-image-reader \
            react-native-safe-area-context \
            react-native-simple-dialogs \
            react-native-svg \
            react-native-video \
            rn-fetch-blob \
            jwk-to-pem \
            jws \
            @react-native-camera-roll/camera-roll \
            react-native-view-shot \
            @react-native-clipboard/clipboard \
            @alessiocancian/react-native-actionsheet \
            recyclerlistview \
            react-native-view-shot \
            react-native-keyboard-aware-scroll-view \
            @react-native-camera-roll/camera-roll \
            @react-native-clipboard/clipboard

or

  npm install 'shr-vaults@npm:@sharering/shr-vaults@^1.0.0-alpha9'
            'shr-react-native-google-places@npm:@sharering/shr-react-native-google-places@3.1.3' \
            'shr-nfc-document-reader@npm:@sharering/shr-nfc-document-reader@^1.0.1' \
            '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' \
            realm \
            @realm/react \
            react-native-qrcode-svg \
            jsrsasign \
            react-native-sensors \
            @shopify/react-native-skia \
            @react-native-async-storage/async-storage \
            @shareledgerjs/client \
            @shareledgerjs/signing \
            @shareledgerjs/types \
            i18next \
            react-i18next \
            react-native-camera \
            react-native-date-picker \
            react-native-device-info \
            react-native-fast-base64 \
            react-native-fs \
            react-native-geolocation-service \
            react-native-get-random-values \
            react-native-image-marker \
            react-native-image-picker \
            @bam.tech/react-native-image-resizer \
            react-native-keychain \
            react-native-linear-gradient \
            react-native-qr-image-reader \
            react-native-safe-area-context \
            react-native-simple-dialogs \
            react-native-svg \
            react-native-video \
            rn-fetch-blob \
            jwk-to-pem \
            jws \
            @react-native-camera-roll/camera-roll \
            react-native-view-shot \
            @react-native-clipboard/clipboard \
            @alessiocancian/react-native-actionsheet \
            recyclerlistview \
            react-native-view-shot \
            react-native-keyboard-aware-scroll-view \
            @react-native-camera-roll/camera-roll \
            @react-native-clipboard/clipboard

Install react navigation​

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

or

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

For more information see: react navigation

Install native base​

For more information see: native base

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.

In file package.json, add this line of code:

{
  //...
  "dependencies": {
    "idengine-module": "file:/path/to/idengine-module.tgz"
    //...
  }
}

or you can use yarn or npm to install

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 'RNKeychain', :path => '../node_modules/react-native-keychain'
      pod 'idengine-module', :path => '../node_modules/idengine-module/ios'
      pod 'shr-nfc-document-reader', :path => '../node_modules/shr-nfc-document-reader'
      pod 'NFCPassportReader', :path => '../node_modules/shr-nfc-document-reader/NFCPassportReader'
    ......

Disable flipper_configuration:

     use_react_native!(
     ....
    # :flipper_configuration => FlipperConfiguration.enabled(["Debug"]),  // command this line
    ....
  )

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

You should now pod install again:

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

If you have the following issue:

Remove these items:

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/libc++_shared.so'
        pickFirst 'lib/armeabi-v7a/libc++_shared.so'
        pickFirst 'lib/arm64-v8a/libc++_shared.so'
        pickFirst '**/libreact_nativemodule_core.so'
        pickFirst '**/libturbomodulejsijni.so'
    }
  ...
 configurations.all {
   resolutionStrategy {
      force "org.jetbrains.kotlin:kotlin-stdlib:1.6.20" // or newest
    }
  }
    
}

  1. Edit your android/build.gradle:
buildscript {
      ext {
         minSdkVersion = 24
          compileSdkVersion = 33
         targetSdkVersion = 33
         kotlinVersion = "1.6.21" // or newest
        }
      repositories {
        .......
        maven { url "https://jitpack.io" } 
        maven { url "https://maven.google.com" }
      }
        
      dependencies {
        .......
        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>

Config for RN​

  1. Modify the 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 = {
  //--> add this here---
  resolver: {
    extraNodeModules: modules.reduce(
      (acc, name) => {
        acc[name] = path.join(__dirname, 'node_modules', name);
        return acc;
      },
      { 
        ...require('node-libs-react-native')
      }
    ),
  },
 //---> end---
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

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:
/**
 * inside file: metro.config.js
 *
 * @format
 */

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);
    },
  },
}

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.

/**
 * inside file: index.js
 *
 * @format
 */

import 'node-libs-react-native/globals'; // <----add this
import 'react-native-get-random-values'; // <----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