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


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

const styles = StyleSheet.create({
  matiButtonStyle: {
    width: 300,
    ...Platform.select({
      ios: {
        height: 60,
      },
      android: {
        height: 40,
      },
    }),
  },
});

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

	//Init SDk
	MatiGlobalIdSdk.init('your client ID here');

	//Send metadata
    MatiGlobalIdSdk.metadata({key: 'value'});
  }

  componentDidMount() {

	//register to login callback
    MatiGlobalIdSdk.setMatiCallback((isSuccess, identityIdOrError) => {
      if (isSuccess) {
        console.log(
          'isSuccess:' + isSuccess + ' identityId:' + identityIdOrError,
        );
      } else {
        console.log('isSuccess:' + isSuccess + ' error:' + identityIdOrError);
      }
    });
  }

  //Add button to view graph
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'powderblue',
        }}>
        //If you want to work with default flow.
        <MatiLoginButton style={styles.matiButtonStyle} Text="Click Here" />
	
        //If you want to work with specific flow, please add "flowId" parameter.
        <MatiLoginButton style={styles.matiButtonStyle} Text="Click Here" flowId="5ea2f0ce6zz8ad001bb12309" />
      </View>
    );
  }
}

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