Implementation

// Example integration – React Native (TypeScript)
//
// 1. Replace <YOUR_CLIENT_ID> and <YOUR_FLOW_ID> with the values
//    from your MetaMap dashboard.
// 2. Customize `metadata` as needed for your own flow.

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

const { MetaMapRNSdk } = NativeModules;

const CLIENT_ID = '<YOUR_CLIENT_ID>';
const FLOW_ID   = '<YOUR_FLOW_ID>';

export default function MetaMapExample() {
  // Launches the MetaMap verification flow
  const startMetaMapFlow = useCallback(() => {
    const metadata = { param1: 'value1', param2: 'value2' };

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

  // Register listeners once, clean up on unmount
  useEffect(() => {
    const emitter = new NativeEventEmitter(MetaMapRNSdk);

    const subscriptions: EmitterSubscription[] = [
      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 () => subscriptions.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',
  },
});