React Native

Integration in a React Native app requires a component that renders a WebView. A WebView that is known to work is React Native WebView.

This guide will walk you through setting up the WebView and making sure your app has direct connection to the GetID module in order to retrieve events and application data. The examples also includes how to request all the permissions needed for the app to access the camera on both iOS and Android.

1. Add react-native-webview to your dependencies

See the React Native WebView Getting Started Guide to read about how to add the webview and link it to your project.

2. Add react-native-permissions to your dependencies

See the React Native Permissions Setup for information on how to add it to your project.

3. Create a html page for loading GetID (IDScan)

This page will contain all your integration code related to GetID.

The method setOnComplete is called when the flow ends and it passes the user data back to react via postMessage.

For more information on handling data, please see GetID (Standalone)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>GetID</title>
  <script src="https://partner.regily.com/[key.js]" async></script>
</head>

<body>
  <script>
    window.onCheckinLoad = (checkin) => {
      window.checkin.settings.setLang('en')
      window.checkin.dataFlow.setKnownData(`{"user": { "firstName": "John", "lastName": "Doe" }}`) // This is optional 
      checkin.signUp.open()

      checkin.dataFlow.setOnComplete(async ({ data, completeData }) => {
        // Pass callback data to react native to handle
        window.ReactNativeWebView.postMessage(JSON.stringify({ data }))
      })
    }

  </script>
</body>

</html>

3. Create a component with the WebView

This WebView will load and communicate with the page created in step 3 and you need to make sure the URI in the example below is updated.

In addition to loading the module, the example also shows how to set all the need permissions to use the camera and file selection.

import React, {Component} from 'react';
import {
  StyleSheet,
  SafeAreaView,
  Linking,
  Alert,
  BackHandler,
  Platform,
} from 'react-native';
import WebView from 'react-native-webview';
import {request, PERMISSIONS, RESULTS} from 'react-native-permissions';
import type {NativeEventSubscription} from 'react-native';

// hideCheckin is used to hide/close the IDScan component and should be defined in the parent component
type Props = {
  hideCheckin: Function;
};
type State = {};

export default class Checkin extends Component<Props, State> {
  state = {};
  backHandlerSubscription?: NativeEventSubscription;
  permissionsList: any[] = [PermissionsAndroid.PERMISSIONS.CAMERA];
  grantedPermissions: string[] = [];
  permissionsRequestCount: number = 0;

  styles = StyleSheet.create({
    container: {
      height: '100%',
      width: '100%',
      justifyContent: 'space-between',
      position: 'absolute',
    },
  });

  constructor(props: Props | Readonly<Props>) {
    super(props);
  }

  componentDidMount() {
    this.managePermissions();
    this.backHandlerSubscription = BackHandler.addEventListener(
      'hardwareBackPress',
      () => {
        this.props.hideCheckin();
        return true;
      },
    );
  }

  componentWillUnmount() {
    this.backHandlerSubscription?.remove();
  }

  // Prompt alert to redirect user to app settings
  promptSettingsAlert() {
    Alert.alert(
      'Permissions settings',
      'Access to camera and gallery are required to advance in the process, please go to the app settings to enable this permission.',
      [
        {
          text: 'Cancel',
          onPress: () => {
            this.props.hideCheckin();
          },
        },
        {
          text: 'OK',
          onPress: () => Linking.openSettings(),
        },
      ],
    );
  }

  requestPermissions = async () => {
    this.permissionsRequestCount++;
    this.grantedPermissions = [];
    try {
      let granted;
      if (Platform.OS === 'ios') {
        granted = await request(PERMISSIONS.IOS.CAMERA);
      } else {
        granted = await request(PERMISSIONS.ANDROID.CAMERA, {
          title: 'Permissions required',
          message:
            'Access to camera and gallery are required to advance in the process, please grant these permissions.',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        });
      }
      this.grantedPermissions.push(granted);
    } catch (err) {
      console.warn(err);
    }
  };

  // Check if permissions hasn't been granted to prompt user
  async managePermissions() {
    const grantedPermCount = this.grantedPermissions.filter(
      granted => granted === RESULTS.GRANTED,
    ).length;
    if (grantedPermCount !== 1) {
      if (this.permissionsRequestCount <= 1) {
        // Ask for permissions
        await this.requestPermissions();
        this.managePermissions();
      } else {
        // Prompt redirect to settings
        this.promptSettingsAlert();
      }
    }
  }

  // Use saveDataToBackend to proccess result data and send it to your server
  async saveDataToBackend(data: any): Promise<void> {
    return new Promise(function (resolve) {
      // Simulated saveDataToBackend
      console.log(data);
      setTimeout(resolve, 2000);
    });
  }

  render() {
    return (
      <SafeAreaView style={this.styles.container}>
        <WebView
          source={{uri: 'https://partner.com/checkin-getid/index.html'}}
          mediaCapturePermissionGrantType="grant"
          allowsInlineMediaPlayback={true}
          allowsFullscreenVideo={true}
          onMessage={(e: {nativeEvent: {data?: string}}) => {
            if (e.nativeEvent.data) {
              // Save data to backend then close module
              this.saveDataToBackend(e.nativeEvent.data).then(() => {
                this.props.hideCheckin();
              });
            }
          }}
        />
      </SafeAreaView>
    );
  }
}

When the application is completed, you can re-direct the user anywhere using your navigation framework (e.g. React Navigation).