Skip to main content

Get Started React Native

1. Requirements​

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.

note

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

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

2. Installation​

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

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

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

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": "custom photos permission",
            "cameraPermission": "Allow $(PRODUCT_NAME) to open the camera",
            "microphonePermission": "Allow $(PRODUCT_NAME) to use the microphone",
            "locationWhenInUseUsage": "We need location permission for this application "
         }
      } as WithWeavrSDKConfig
   ],
   [
      'expo-build-properties',
      {
         android: {
            compileSdkVersion: 34,
            targetSdkVersion: 34,
            buildToolsVersion: '34.0.0',
         },
         ios: {
            deploymentTarget: '14.0',
         },
      },
   ],
],

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

Please 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, please 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.

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

setAppCheckToken("");

The method UXComponents.setAppCheckToken(_:) returns a Bool.

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 by
initializePSA(env)
  .then((res) => console.log(res))
  .catch((e) => console.log(e));