React Native

Add the Mati button to your React Native app.

Mati React Native Usage Guide

This is a guide to add Mati to Android and iOS for React Native versions 0.60.x and higher. These instructions includes:

React Native Demo App

You can go to GitHub to download the Mati React Native demo app

Install Mati for React Native

In a terminal, use the following command to install Mati for React Native:

npm install --save

EXPO Managed Workflow

The following instructions installs and add Expo to manage your workflow, and assumes you already have [yarn]( installed on your system:

  1. Install the SDK:
    yarn add
  2. Add the followling line to your app.json file:
    "plugins": ["react-native-mati-global-id-sdk"]
  3. Run EXPO for your platform:
    For iOS:
    expo run:ios
    For Android:
    expo run:android

Platform Installation

Install for Android

For Android check that the minSdkVersion in <YOUR_APP>/build.gradle is ≥21, then sync your Gradle files

Install for iOS

The targeted OS version should be a minimum of 12+.

  1. From your podfile directory, run the following command to fetch the project dependencies:

    pod install
  2. Add the following to your info.plist file to grant camera, microphone, and photo gallery access:

    <string>Mati needs access to your Camera</string>
    <string>Mati needs access to your media library</string>
    <string>Mati needs access to your Microphone</string>

    Note The voiceliveness feature requires microphone access (NSMicrophoneUsageDescription).


Click here to learn more about the podfile x86_64 issues for Flipper

You may see an x86_64 error similar to the following:
/Flipper/xplat/Flipper/FlipperRSocketResponder.cpp normal x86_64 c++
This error is because React Native does not support Flipper (included by default), so you must remove Flipper.

##### Remove Flipper

1. In your podfile:
    * Replace
        `use_flipper!` or `use-flipper!()`

    * For React Native v0.64+ replace:
        post_install do |installer|
        post_install do |installer|

          installer.pods_project.targets.each do |target|
            target.build_configurations.each do |config|
              config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'

            if ('FBReactNativeSpec'))
              target.build_phases.each do |build_phase|
                if (build_phase.respond_to?(:name) &&'[CP-User] Generate Specs'))
                  target.build_phases.move(build_phase, 0)

1. Then run the following commands in your terminal:
    pod clean
    pod install

##### Learn More About the Issue
* Flipper
* 0.64 FBReactNativeSpec

##### Example Mati Podfiles on GitHub
* [Podfile Version 0.60+](
* [Podfile Version 0.64](

Reinstall Mati for React Native

To reinstall Mati for React Native, you will need to:

  1. Uninstall your current version of Mati:
    npm uninstall react-native-mati-global-id-sdk
  2. Install the latest version of Mati:
    npm install --save
  3. Update your IDE files:
  • Android: Sync your Gradle files
  • iOS: Clean and update your pod files:
    pod clean && pod update

Example Mati React Native Implementation

The following is a example component.

import React, {Component} from 'react';
import {
} from 'react-native';

import {
} from 'react-native-mati-global-id-sdk';

export default class App extends Component {
  constructor() {
    console.log('Constructor Called.');

  componentDidMount() {
     //set listening callbacks
    const MatiVerifyResult = new NativeEventEmitter(NativeModules.MatiGlobalIdSdk)
     MatiVerifyResult.addListener('verificationSuccess', (data) => console.log(data))
     MatiVerifyResult.addListener('verificationCanceled', (data) => console.log(data))

  //call showFlow when button is clicked
  handleMatiClickButton = () => {

     //set 3 params clientId (cant be null), flowId, metadata
      var yourMetadata = { param1: "value1", param2: "value2" }

     MatiGlobalIdSdk.showFlow("YOUR_CLIENT_ID", "YOUR_FLOW_ID", yourMetadata);

  //Add button to view graph
  render() {
    return (
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'powderblue',
        <Button onPress={this.handleMatiClickButton} title="Click here"/>

Did this page help you?