Implementation

// MetaMap Integration Example – React Native (JavaScript)
//
// 1. Replace CLIENT_ID and FLOW_ID with your values from the MetaMap dashboard.
// 2. Optionally, modify the metadata to customize your verification flow.

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

const { MetaMapRNSdk } = NativeModules;

// TODO: Replace with your actual values from dashboard
const CLIENT_ID = '<YOUR_CLIENT_ID>';
const FLOW_ID   = '<YOUR_FLOW_ID>';

export default function MetaMapExample() {
  // 🔹 Launch MetaMap verification flow
  const metadata = { param1: 'value1', param2: 'value2' };

    console.log('🔁 Starting MetaMap verification flow...');
    MetaMapRNSdk.showFlow(CLIENT_ID, FLOW_ID, metadata);
  }, []);

  // 🔹 Setup event listeners once on mount
  useEffect(() => {
    const emitter = new NativeEventEmitter(MetaMapRNSdk);

    const listeners = [
      emitter.addListener('verificationStarted',  data => console.log('📤 verificationStarted:', data)),
      emitter.addListener('verificationSuccess',  data => console.log('✅ verificationSuccess:', data)),
      emitter.addListener('verificationCanceled', data => console.log('❌ verificationCanceled:', data)),
    ];

    return () => {
      // 🔻 Clean up event listeners on unmount
      listeners.forEach(sub => sub.remove());
    };
  }, []);

  return (
    <View style={styles.container}>
      <Button title="Start MetaMap Flow" onPress={startMetaMapFlow} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#E6F0FF',
  },
});