Get started React Native

1. Prerequisites

React Native is a widely used framework for developing mobile applications with JavaScript or TypeScript. You can create a new React Native project using either expo or react-native-cli. To set up the necessary dependencies, consult the official documentation for both tools.

Dependency compatibility

React Native architecture

We don't currently support React Native's new architecture. You must ensure you are using React Native 0.75.4 or earlier, and have the new architecture disabled.

Version	Release date	React Native	React	Expo
4.0	July 2025	~0.79	~19	~53
3.0	June 2025	0.75.4	18.3.1	51
2.0	January 2025	0.75.4	18.3.1	51
1.7	June 2024	0.75.4	18.3.1	51

Device compatibility

Version	Min iOS	Min Android
4.0	15.1+	21+
3.0	15.1+	24+
2.0	13+	24+
1.7	13+	21+

Expo

npm install -g expo-cli

Expo configuration plugin allows developers to customize native build settings for their Expo-managed projects. You may need to install expo-build-properties by

expo install expo-build-properties

RN CLI

npm install -g react-native-cli

2. Installation

expo

expo install @weavr-io/secure-components-react-native

npm

npm install @weavr-io/secure-components-react-native

yarn

yarn add @weavr-io/secure-components-react-native

Before integrating into your app, ensure the necessary sources are added to iOS and Android.

iOS

Podfile

source 'https://cdn.cocoapods.org/'
source 'https://github.com/SumSubstance/Specs.git'

# Either explicitly state dynamic linking on your Cocoapods file, or use the properties file of
# your React Native / Expo project to ensure dynamic linkage is used by your app.
use_frameworks! : linkage => :dynamic # Required by Approov

Android

build.gradle

maven { url "https://maven.sumsub.com/repository/maven-public/" }
jcenter()

maven {
   url "https://gitlab.okaythis.com/api/v4/projects/15/packages/maven"
   name "GitLab"
}
maven {
   url 'https://storage.googleapis.com/download.flutter.io'
}

In addition, configure the Android settings in build.gradle (app)

configurations.all {
c -> c.resolutionStrategy.eachDependency {
      DependencyResolveDetails dependency ->
         println dependency.requested.group
         if (dependency.requested.group == 'org.bouncycastle') {
            dependency.useTarget 'org.bouncycastle:bcprov-jdk15to18:1.68'
         }
   }
}

And in Manifest

tools:replace="android:allowBackup"

Using Expo

Additional configuration is required when using Expo.

Firstly, export the asset path as demonstrated in the following example:

react-native.config.js

const path = require("path");

module.exports = {
  assets: ["./assets/fonts/"],
};

Additionally, set up the necessary permissions in the plugin configuration.

app.config.ts

plugins: [
   [
      '@weavr-io/secure-components-react-native',
      {
         permissions: {
            "photosPermission": "Allow $(PRODUCT_NAME) to access photos in your library to perform KYC",
            "cameraPermission": "Allow $(PRODUCT_NAME) to open the camera to perform KYC",
            "microphonePermission": "Allow $(PRODUCT_NAME) to use the microphone to perform KYC",
            "locationWhenInUseUsage": "Allow $(PRODUCT_NAME) to get access to your location while in use to perform KYC",
            "faceIdUsage": "Allow $(PRODUCT_NAME) to get access to Face ID to login with biometrics"
         }
      } as WithWeavrSDKConfig
   ],
   [
      'expo-build-properties',
      {
         android: {
            compileSdkVersion: 35,
            targetSdkVersion: 35,
            buildToolsVersion: '35.0.0',
         },
         ios: {
            deploymentTarget: '15.1',
         },
      },
   ],
],

As Biometric Authentication works with the Firebase push notification service, you might need to add Firebase react-native dependencies to your app. So, on your package.json add:

package.json

   "@react-native-firebase/app": "14.12.0",
   "@react-native-firebase/messaging": "14.12.0",
   "@react-native-push-notification": "^8.1.1",
   "@react-native-community/push-notification-ios": "^1.11.0", //for ios Only
   "@react-native-firebase/app": "^21.4.1",
   "@react-native-firebase/app-check": "^21.13.0",

Follow the instruction and installation guide at React Native Firebase to download and configure google.services.json (for Android) and GoogleService-Info.plist(for iOS) on your app.

For expo managed apps only, add to your package.Json file

package.json

"@react-native-firebase/app",

To use expo-dev-client you must create and install a development build on your target device.

npx eas build --profile development --local

Finally

expo start

3. Set AppCheck token

To securely link Firebase App Check protection with Weavr’s SDK components, you must retrieve and store the App Check token before sensitive operations like login or biometric enrolment.

tip

You can use React Native Firebase to fetch your token

The setAppCheckToken() method securely injects the App Check token into the SDK.

setAppCheckToken("");

The method setAppCheckToken() returns a boolean.

true: the token was stored successfully in the SDK.

false: the firebase App Check token was not accepted —- ensure the token is valid and properly formatted.

4. Initialize the SDK

After the libraries are in place, you can initialize the Weavr component SDK by:

import {
  initializeUXComponents,
  initializePSA,
} from "@weavr-io/secure-components-react-native";

initializeUXComponents(env, WEAVR_UI_KEY)
  .then((res) => console.log(res))
  .catch((e) => console.log(e));

//if you are using weavr biometric, you need to initialise the biometric solution too:
initializePSA(env)
  .then((res) => console.log(res))
  .catch((e) => console.log(e));