Optimized sdk

import React, { Component } from 'react';

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

const { MyIdModule } = NativeModules;

const myidEvents = new NativeEventEmitter(MyIdModule);

export default class App extends Component {

  constructor() {

    super();

    this.startSdk  = this.startSdk.bind(this);

  }

  UNSAFE_componentWillMount() {

    myidEvents.addListener('onSuccess', result =>

        Alert.alert(

          'onSuccess received',

        )

    );

    myidEvents.addListener('onError', result =>

        Alert.alert(

          'onError received',

        )

    );

    myidEvents.addListener('onUserExited', result =>

        Alert.alert(

          'onUserExited received',

        )

    );

  }

  render() {

    return (

      <View

        style={{

          flex: 1,

          justifyContent: 'center',

          alignItems: 'center',

        }}>

      <Button

        title="Start MyID"

        color="#841584"

        onPress={ this.startSdk }

      />

    </View>

    );

  }

  startSdk() {

    MyIdModule.startMyId();

  }

}

 No newline at end of file

import React, {useEffect, useState} from 'react';

import {

  View,

  Button,

  NativeModules,

  NativeEventEmitter,

  Image,

  StyleSheet,

} from 'react-native';

const {MyIdModule} = NativeModules;

type SuccessEvent = {

  code: string;

  comparison: number;

  image: string;

};

type ErrorEvent = {

  message: string;

  code: number;

};

const clientId = 'emit_sdk-pEXr5TMHOHYL5QcP2JjObte94zS0vPpLnjbqTigm"';

const clientHash = 'f79e7195-cf94-4bdd-9115-6c08033e191c';

const clientHashId =

  'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwgGX9AQqActMnsW5K++GXYYCynxB/RQVMRSBsYCjSEmIrKaV8InLDxoG+WE2AY7lGyoo9qkxzKg1Vk6tW8pBW5PpNSH6xN1P9ufEnHQWuXCpdT+UkAoVMGnoYQ6glp9mZVlPEottslt6THAGa9wf3fMku97UdsuSctOeGXDr3LnsCFB7ZmaracTQFQ41v6SMbGZX2NsIKVtlJMZqAle9sI3crk9RGRg7Os8f1NolNNFuWQEjx/DpaSjCHGMMscWkSX7GEqJiVSNybGquHe1vjtswoT3oO2Mr+uCfz6Owx/d0/0Q8YWxvhorxbGT0CEw1m0CU+JbWh2lrgf1jHvBULQIDAQAB';

const passportData = 'passport-number';

const dateOfBirth = '1990-01-01'; // Ensure the date format matches what your SDK expects

const buildMode = 'PRODUCTION'; // or "DEBUG", depending on your environment

const App = () => {

  const [imageBase64, setImageBase64] = useState('');

  useEffect(() => {

    if (MyIdModule) {

      const myidEvents = new NativeEventEmitter(MyIdModule);

      const onSuccess = (event: SuccessEvent) => {

        console.log('onSuccess received', event.code, event.comparison);

        // Clipboard.setString(event.image);

        setImageBase64(event.image);

      };

      const onError = (event: ErrorEvent) =>

        console.log('onError received', event);

      const onUserExited = (event: any) =>

        console.log('onUserExited received', event);

      myidEvents.addListener('onSuccess', onSuccess);

      myidEvents.addListener('onError', onError);

      myidEvents.addListener('onUserExited', onUserExited);

      return () => {

        myidEvents.removeAllListeners('onSuccess');

        myidEvents.removeAllListeners('onError');

        myidEvents.removeAllListeners('onUserExited');

      };

    }

  }, []);

  const startSdk = () => {

    if (MyIdModule) {

      console.log('Calling startMyId');

      MyIdModule.startMyId(

        clientId,

        clientHash,

        clientHashId,

        passportData,

        dateOfBirth,

        buildMode,

      );

      console.log('Called startMyId');

    } else {

      console.log('Module is not available');

    }

  };

  return (

    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

      {imageBase64 ? (

        <Image

          style={styles.image}

          source={{uri: `data:image/jpeg;base64,${imageBase64}`}}

        />

      ) : null}

      <Button title="Start MyID" color="#841584" onPress={startSdk} />

    </View>

  );

};

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  image: {

    width: 200,

    height: 200,

  },

});

source 'https://rubygems.org'

# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version

ruby '>= 2.6.10'

ruby ">= 2.6.10"

gem 'cocoapods', '>= 1.11.3'

# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper

# bound in the template on Cocoapods with next React Native release.

gem 'cocoapods', '>= 1.13', '< 1.15'

gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'

GEM

  remote: https://rubygems.org/

  specs:

    CFPropertyList (3.0.6)

    CFPropertyList (3.0.7)

      base64

      nkf

      rexml

    activesupport (7.0.4.3)

    activesupport (6.1.7.8)

      concurrent-ruby (~> 1.0, >= 1.0.2)

      i18n (>= 1.6, < 2)

      minitest (>= 5.1)

      tzinfo (~> 2.0)

    addressable (2.8.3)

      public_suffix (>= 2.0.2, < 6.0)

      zeitwerk (~> 2.3)

    addressable (2.8.7)

      public_suffix (>= 2.0.2, < 7.0)

    algoliasearch (1.27.5)

      httpclient (~> 2.8, >= 2.8.3)

      json (>= 1.5.1)

    atomos (0.1.3)

    base64 (0.2.0)

    claide (1.1.0)

    cocoapods (1.12.0)

    cocoapods (1.14.3)

      addressable (~> 2.8)

      claide (>= 1.0.2, < 2.0)

      cocoapods-core (= 1.12.0)

      cocoapods-core (= 1.14.3)

      cocoapods-deintegrate (>= 1.0.3, < 2.0)

      cocoapods-downloader (>= 1.6.0, < 2.0)

      cocoapods-downloader (>= 2.1, < 3.0)

      cocoapods-plugins (>= 1.0.0, < 2.0)

      cocoapods-search (>= 1.0.0, < 2.0)

      cocoapods-trunk (>= 1.6.0, < 2.0)

      molinillo (~> 0.8.0)

      nap (~> 1.0)

      ruby-macho (>= 2.3.0, < 3.0)

      xcodeproj (>= 1.21.0, < 2.0)

    cocoapods-core (1.12.0)

      xcodeproj (>= 1.23.0, < 2.0)

    cocoapods-core (1.14.3)

      activesupport (>= 5.0, < 8)

      addressable (~> 2.8)

      algoliasearch (~> 1.0)

      public_suffix (~> 4.0)

      typhoeus (~> 1.0)

    cocoapods-deintegrate (1.0.5)

    cocoapods-downloader (1.6.3)

    cocoapods-downloader (2.1)

    cocoapods-plugins (1.0.0)

      nap

    cocoapods-search (1.0.1)

      netrc (~> 0.11)

    cocoapods-try (1.2.0)

    colored2 (3.1.2)

    concurrent-ruby (1.2.2)

    concurrent-ruby (1.3.3)

    escape (0.0.4)

    ethon (0.16.0)

      ffi (>= 1.15.0)

    ffi (1.15.5)

    ffi (1.17.0)

    fourflusher (2.3.1)

    fuzzy_match (2.0.4)

    gh_inspector (1.1.3)

    httpclient (2.8.3)

    i18n (1.12.0)

    i18n (1.14.5)

      concurrent-ruby (~> 1.0)

    json (2.6.3)

    minitest (5.18.0)

    json (2.7.2)

    minitest (5.24.1)

    molinillo (0.8.0)

    nanaimo (0.3.0)

    nap (1.1.0)

    netrc (0.11.0)

    nkf (0.2.0)

    public_suffix (4.0.7)

    rexml (3.2.5)

    rexml (3.2.9)

      strscan

    ruby-macho (2.5.1)

    typhoeus (1.4.0)

    strscan (3.1.0)

    typhoeus (1.4.1)

      ethon (>= 0.9.0)

    tzinfo (2.0.6)

      concurrent-ruby (~> 1.0)

    xcodeproj (1.22.0)

    xcodeproj (1.24.0)

      CFPropertyList (>= 2.3.3, < 4.0)

      atomos (~> 0.1.3)

      claide (>= 1.0.2, < 2.0)

      colored2 (~> 3.1)

      nanaimo (~> 0.3.0)

      rexml (~> 3.2.4)

    zeitwerk (2.6.16)

PLATFORMS

  ruby

DEPENDENCIES

  cocoapods (>= 1.11.3)

  activesupport (>= 6.1.7.5, < 7.1.0)

  cocoapods (>= 1.13, < 1.15)

RUBY VERSION

   ruby 3.1.3p185

   ruby 2.6.10p210

BUNDLED WITH

   2.3.26

   2.1.4

# MyID Sample React Native

This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).

## [Android](https://gitlab.myid.uz/myid-public-code/myid-sample-android)

## [iOS](https://gitlab.myid.uz/myid-public-code/myid-sample-ios)

# Getting Started

>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.

## Step 1: Start the Metro Server

First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.

To start Metro, run the following command from the _root_ of your React Native project:

```bash

# using npm

npm start

# OR using Yarn

yarn start

```

## Step 2: Start your Application

Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:

### For Android

```bash

# using npm

npm run android

# OR using Yarn

yarn android

```

### For iOS

```bash

# using npm

npm run ios

# OR using Yarn

yarn ios

```

If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

## Step 3: Modifying your App

Now that you have successfully run the app, let's modify it.

1. Open `App.tsx` in your text editor of choice and edit some lines.

2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!

   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!

## Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face:

### Now what?

- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).

- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).

# Troubleshooting

If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.

# Learn More

To learn more about React Native, take a look at the following resources:

- [React Native Website](https://reactnative.dev) - learn more about React Native.

- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.

- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.

- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.

- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.