Docs

React Native

Add the MetaMap button to your React Native app.

MetaMap React Native Usage Guide

This is a guide to add MetaMap 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 MetaMap React Native demo app

Install MetaMap for React Native

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

npm install https://github.com/MatiFace/react-native-mati-global-id-sdk.git --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:
    npm i react-native-metamap-sdk
  2. Add the followling line to your app.json file:
    "plugins":["react-native-metamap-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

  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:

    <key>NSCameraUsageDescription</key>
<string>MetaMap needs access to your Camera</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>MetaMap needs access to your media library</string>
<key>NSMicrophoneUsageDescription</key>
<string>MetaMap needs access to your Microphone</string>

    Note The voiceliveness feature requires microphone access (NSMicrophoneUsageDescription).

    IMPORTANT KNOWN ISSUE

    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++ com.apple.compilers.llvm.clang.1_0.compiler

    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!()
        with
        use_frameworks!

      • For React Native v0.64+ replace:

         post_install do |installer|
  react_native_post_install(installer)
 end

        with

        post_install do |installer|
 react_native_post_install(installer)

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

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

    2. Then run the following commands in your terminal:

    ```bash
pod clean
pod install
```
    Learn More About the Issue
Example MetaMap Podfiles on GitHub

  • Podfile Version 0.60+

  • Podfile Version 0.64

    _**IMPORTANT**_ KNOWN ISSUE
    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++ com.apple.compilers.llvm.clang.1_0.compiler

    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!()`
        with
        `use_frameworks!`

    * For React Native v0.64+ replace:
        ```ruby
        post_install do |installer|
          react_native_post_install(installer)
        end
        ```
        with
        ```ruby
        post_install do |installer|
          react_native_post_install(installer)

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

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

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

##### Learn More About the Issue
* Flipper https://github.com/facebook/react-native/issues/29984
* 0.64 FBReactNativeSpec https://github.com/facebook/react-native/issues/31034

##### Example MetaMap Podfiles on GitHub
* [Podfile Version 0.60+](https://github.com/GetMati/mati-mobile-examples/blob/main/reactnative-podexamples/Podfile_063)
* [Podfile Version 0.64](https://github.com/GetMati/mati-mobile-examples/blob/main/reactnative-podexamples/Podfile_064)

Reinstall MetaMap for React Native

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

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

Example MetaMap React Native Implementation

The following is an example of the class Component.

import React, {Component} from 'react';
import {
  NativeModules,
  NativeEventEmitter,
  Button,
  View
} from 'react-native';

import {
  MetaMapRNSdk,
} from 'react-native-metamap-sdk';

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

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

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

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

     MetaMapRNSdk.showFlow("YOUR_CLIENT_ID", "YOUR_FLOW_ID", yourMetadata);
  }

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

The following is an example of the Function Component.

import React, {Component, useEffect} from 'react';
import {
  NativeModules,
  NativeEventEmitter,
  Button,
  View
} from 'react-native';

import {
  MetaMapRNSdk,
} from 'react-native-metamap-sdk';


function App(props) {

    useEffect(() => {
        const MetaMapVerifyResult = new NativeEventEmitter(NativeModules.MetaMapRNSdk)
        MetaMapVerifyResult.addListener('verificationSuccess', (data) => console.log(data))
        MetaMapVerifyResult.addListener('verificationCanceled', (data) => console.log(data))
    })
    const handleMetaMapClickButton = (props) => {

            //set 3 params clientId (cant be null), flowId, metadata
         var yourMetadata = { param1: "value1", param2: "value2" }
         MetaMapRNSdk.showFlow("610b96fb7cc893001b135505", "611101668083a1001b13cc80", yourMetadata);
      }

    return (
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'powderblue',
            }}>
            <Button onPress = {() => handleMetaMapClickButton()}  title="Click here"/>
          </View>
        );
}
export default App;

Updated 3 months ago

Did this page help you?