@finos_sdk/sdk-ekyc 1.4.8 → 1.4.9

package/dist/index.js

@@ -32,10 +32,14 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OCR_USE_NEW_ID_DOCUMENT_2 = exports.OCR_USE_NEW_ID_DOCUMENT_1 = exports.OCR_FAKE_MRZ = exports.OCR_INVALID_GENDER_CODE = exports.OCR_INVALID_ID_CARD = exports.OCR_GLARE_ID_CARD = exports.OCR_BLURRY_ID_CARD = exports.OCR_CUT_CORNER_ID_CARD = exports.OCR_CANNOT_RECOGNIZE_PORTRAIT = exports.OCR_ID_CARD_FROM_OTHER_DEVICE = exports.OCR_NOT_ORIGINAL_ID_CARD = exports.OCR_MISSING_ID_CARD_PART = exports.OCR_CANNOT_GET_ISSUE_PLACE = exports.OCR_CANNOT_GET_GENDER = exports.OCR_CANNOT_GET_HOMETOWN = exports.OCR_CANNOT_GET_RESIDENCE = exports.OCR_CANNOT_GET_ISSUE_DATE = exports.OCR_CANNOT_GET_EXPIRY_DATE = exports.OCR_CANNOT_GET_BIRTH_YEAR = exports.OCR_CANNOT_GET_NAME = exports.OCR_CANNOT_GET_ID_NUMBER = exports.OCR_WRONG_ID_CARD_SIDE = exports.OCR_UNRECOGNIZED_ID_CARD = exports.SDK_MISS_KEY = exports.ERROR_UNKNOWN = exports.SDK_START_ERROR = exports.SDK_START_FLOW_ERROR = exports.getMessage = exports.getErrorResultFromDetails = exports.createCustom = exports.fromCode = exports.getLocalizedMessage = exports.parseNfcResponse = exports.AuthorizationStatus = exports.AppIDType = exports.getEkycError = exports.EKYCErrorEvent = exports.EKYCEvent = exports.customActionsToStrings = exports.SDK_LIVENESS_ACTIONS = exports.SDKFaceDetectStatus = exports.flowToStrings = exports.SDK_FLOW_OPTIONS = exports.SDKFlowType = exports.FinosESignModule = exports.FinosESign = exports.FinosEKYCModule = exports.FinosEKYC = exports.SDKeKYC = exports.sdkEKYC = void 0;
 exports.ESIGN_INVALID_USER_ACCOUNT = exports.ESIGN_APP_LIMITED = exports.ESIGN_DEVICE_NOT_INIT = exports.ESIGN_INVALID_LICENSE_CONTENT = exports.ESIGN_INVALID_LICENSE = exports.ESIGN_DEVICE_ALREADY_INIT = exports.ESIGN_SESSION_INVALID = exports.FETCH_HISTORY_ERROR = exports.QRCODE_ERROR = exports.SMS_OTP_RATE_LIMIT = exports.SMS_OTP_NOT_FOUND = exports.SMS_OTP_MAX_ATTEMPTS = exports.SMS_OTP_INVALID_PHONE = exports.SMS_OTP_ERROR = exports.NFC_CHIP_AUTH_FAILED = exports.NFC_USER_CANCEL = exports.NFC_UNKNOWN_ERROR = exports.NFC_IO_ERROR = exports.NFC_INVALID_MRZ_KEY = exports.NFC_CONNECTION_LOST = exports.NFC_MUTUAL_AUTH_FAILED = exports.C06_ERROR = exports.SCAN_NFC_ENABLE = exports.SCAN_NFC_CHECK = exports.SCAN_NFC_ERROR = exports.HEAD_IS_TURNED_IN_SELFIE = exports.NUDITY_DETECTED_IN_SELFIE = exports.READING_GLASSES_DETECTED_IN_SELFIE = exports.EYEWEAR_DETECTED_IN_SELFIE = exports.FACE_OCCLUDED_IN_SELFIE = exports.FACE_IS_BLURRED = exports.MASK_PRESENT_IN_SELFIE = exports.EYES_CLOSED_IN_SELFIE = exports.MULTIPLE_FACES_IN_SELFIE = exports.LIVENESS_FAIL = exports.LIVENESS_ERROR = exports.FACE_ERROR = exports.FACE_HAT_ERROR = exports.OCR_ERROR = exports.OCR_FONT_BACK_NOT_MATCH = exports.OCR_PHOTOCOPY_ID_CARD = exports.OCR_FAKE_PORTRAIT_DETECTED = exports.OCR_FAKE_CHARACTERS_DETECTED_2 = exports.OCR_FAKE_CHARACTERS_DETECTED_1 = exports.OCR_UNKNOWN_ID_NUMBER_LENGTH = exports.OCR_MODIFIED_BIRTH_DATE_DETECTED_CMND = exports.OCR_MODIFIED_SYMBOL_DETECTED_CMND = exports.OCR_FAKE_BIRTH_DATE_DETECTED_CMND = exports.OCR_FAKE_PORTRAIT_DETECTED_CMND = exports.OCR_FAKE_CHARACTERS_DETECTED_CMND = void 0;
 exports.SDK_NAME = exports.SDK_VERSION = exports.USER_CANCEL = exports.ESIGN_INVALID_PIN_CODE = exports.ESIGN_INVALID_RECOVERY_CODE = exports.ESIGN_INVALID_LICENSE_CODE = exports.ESIGN_INVALID_CONTEXT = exports.ESIGN_MISSING_REQUEST_ID = exports.ESIGN_MISSING_SERIAL = exports.ESIGN_MISSING_IDENTITY = exports.ESIGN_MISSING_ACCESS_TOKEN = exports.ESIGN_NO_SESSION_ID = exports.ESIGN_MISSING_CONFIRMATION_DOC = exports.ESIGN_MISSING_REQUEST_JSON = exports.ESIGN_MISSING_CCCD = exports.ESIGN_MISSING_TOKEN = exports.ESIGN_ERROR_UNKNOWN = exports.ESIGN_AUTH_REQUEST_EXISTS = exports.ESIGN_INVALID_CERT_FOR_AUTH = exports.ESIGN_INVALID_SIGN_COUNT_OR_TIME = exports.ESIGN_AUTH_EXISTS = exports.ESIGN_SESSION_INVALID_LIST_CERT = exports.ESIGN_INVALID_RECOVERY_OR_PIN = exports.ESIGN_SESSION_INVALID_REGISTER = void 0;
+const react_native_1 = require("react-native");
 const EKYCModule_1 = __importStar(require("./EKYCModule"));
 exports.sdkEKYC = EKYCModule_1.default;
 Object.defineProperty(exports, "SDKeKYC", { enumerable: true, get: function () { return EKYCModule_1.SDKeKYC; } });
@@ -47,6 +51,9 @@ Object.defineProperty(exports, "FinosEKYCModule", { enumerable: true, get: funct
 const FinosESignModule_1 = require("./src/modules/FinosESignModule");
 Object.defineProperty(exports, "FinosESign", { enumerable: true, get: function () { return FinosESignModule_1.FinosESign; } });
 Object.defineProperty(exports, "FinosESignModule", { enumerable: true, get: function () { return FinosESignModule_1.FinosESignModule; } });
+const ExitSheetWrapper_1 = __importDefault(require("./src/components/ExitSheetWrapper"));
+// Auto-register exit sheet wrapper — khách hàng không cần khai báo AppRegistry
+react_native_1.AppRegistry.registerComponent('SDKExitSheetWrapper', () => ExitSheetWrapper_1.default);
 console.log('✅ SDK modules loaded successfully');
 // Export main SDK instance and class (legacy)
 exports.default = EKYCModule_1.default;

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos_sdk/sdk-ekyc",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "description": "React Native SDK for eKYC - Vietnamese CCCD NFC reading, OCR, Liveness detection, Face matching, and C06, eSign, SmsOTP residence verification",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/src/components/ExitConfirmSheet.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExitConfirmSheet: (props: any) => React.JSX.Element;
+export default ExitConfirmSheet;

package/dist/src/components/ExitConfirmSheet.js

@@ -0,0 +1,164 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const FinosEKYCModule_1 = require("../modules/FinosEKYCModule");
+const BellIcon = () => (<react_native_1.View style={styles.bellWrapper}>
+    <react_native_1.View style={styles.bellMount}/>
+    <react_native_1.View style={styles.bellBody}/>
+    <react_native_1.View style={styles.bellSkirt}/>
+    <react_native_1.View style={styles.bellClapper}/>
+  </react_native_1.View>);
+const ExitConfirmSheet = (props) => {
+    const message = props.message || 'Giao dịch bị hủy khi điều hướng sang tính năng tiếp theo. Quý khách có chắc chắn hủy giao dịch?';
+    const confirmText = props.confirmText || 'Đồng ý';
+    const cancelText = props.cancelText || 'Ở lại';
+    const handleConfirm = async () => {
+        await FinosEKYCModule_1.FinosEKYC.resolveExit('CONFIRM');
+    };
+    const handleCancel = async () => {
+        await FinosEKYCModule_1.FinosEKYC.resolveExit('CANCEL');
+    };
+    return (<react_native_1.View style={styles.container} onLayout={(e) => {
+            var _a, _b;
+            const h = e.nativeEvent.layout.height;
+            if (h > 0)
+                (_b = (_a = react_native_1.NativeModules.EKYCModule) === null || _a === void 0 ? void 0 : _a.setExitSheetHeight) === null || _b === void 0 ? void 0 : _b.call(_a, h);
+        }}>
+      <react_native_1.View style={styles.handle}/>
+
+      <react_native_1.View style={styles.content}>
+        <BellIcon />
+        <react_native_1.Text style={styles.message}>{message}</react_native_1.Text>
+      </react_native_1.View>
+
+      <react_native_1.View style={styles.footer}>
+        <react_native_1.TouchableOpacity style={styles.confirmButton} onPress={handleConfirm} activeOpacity={0.8}>
+          <react_native_1.View style={styles.gradientContainer}>
+            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#E53935' }]}/>
+            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#EA4F28' }]}/>
+            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#EF6519' }]}/>
+            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#F47A0B' }]}/>
+            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#F98F00' }]}/>
+            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#FCA300' }]}/>
+            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#FFB800' }]}/>
+            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#FFCC00' }]}/>
+            <react_native_1.View style={[styles.gradientStep, { backgroundColor: '#FFD600' }]}/>
+          </react_native_1.View>
+          <react_native_1.Text style={styles.confirmText}>{confirmText}</react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+
+        <react_native_1.TouchableOpacity style={styles.cancelButton} onPress={handleCancel} activeOpacity={0.7}>
+          <react_native_1.Text style={styles.cancelText}>{cancelText}</react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: 'white',
+        paddingHorizontal: 24,
+        paddingBottom: 32,
+        borderTopLeftRadius: 32,
+        borderTopRightRadius: 32,
+    },
+    handle: {
+        width: 40,
+        height: 4,
+        backgroundColor: '#CCCCCC',
+        borderRadius: 2,
+        alignSelf: 'center',
+        marginTop: 12,
+        marginBottom: 20,
+    },
+    content: {
+        alignItems: 'center',
+        marginBottom: 28,
+    },
+    bellWrapper: {
+        alignItems: 'center',
+        width: 72,
+        height: 72,
+        marginBottom: 20,
+    },
+    bellMount: {
+        width: 9,
+        height: 7,
+        borderRadius: 4,
+        backgroundColor: '#E53935',
+        marginTop: 7,
+    },
+    bellBody: {
+        width: 36,
+        height: 34,
+        borderTopLeftRadius: 18,
+        borderTopRightRadius: 18,
+        backgroundColor: '#E53935',
+        marginTop: -1,
+    },
+    bellSkirt: {
+        width: 48,
+        height: 9,
+        borderBottomLeftRadius: 5,
+        borderBottomRightRadius: 5,
+        backgroundColor: '#E53935',
+    },
+    bellClapper: {
+        width: 12,
+        height: 7,
+        borderBottomLeftRadius: 6,
+        borderBottomRightRadius: 6,
+        backgroundColor: '#E53935',
+        marginTop: 2,
+    },
+    message: {
+        fontSize: 15,
+        color: '#1A1A1A',
+        textAlign: 'center',
+        lineHeight: 19.5,
+    },
+    footer: {
+        width: '100%',
+        gap: 12,
+    },
+    confirmButton: {
+        width: '100%',
+        height: 52,
+        borderRadius: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        elevation: 4,
+        shadowColor: '#E53935',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+    },
+    gradientContainer: Object.assign(Object.assign({}, react_native_1.StyleSheet.absoluteFillObject), { flexDirection: 'row' }),
+    gradientStep: {
+        flex: 1,
+    },
+    confirmText: {
+        fontSize: 16,
+        fontWeight: '700',
+        color: '#fff',
+    },
+    cancelButton: {
+        width: '100%',
+        height: 52,
+        borderRadius: 24,
+        borderWidth: 1.5,
+        borderColor: '#CCCCCC',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    cancelText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#555555',
+    },
+});
+exports.default = ExitConfirmSheet;

package/dist/src/components/ExitSheetWrapper.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+/**
+ * Set custom exit sheet component.
+ * Gọi trước khi showRNExitSheet để override default ExitConfirmSheet.
+ */
+export declare function setCustomExitComponent(component: React.ComponentType<any> | null): void;
+/**
+ * Wrapper component được SDK auto-register với tên 'SDKExitSheetWrapper'.
+ * Render custom component nếu được set, fallback về ExitConfirmSheet mặc định.
+ */
+declare const ExitSheetWrapper: (props: any) => React.JSX.Element;
+export default ExitSheetWrapper;

package/dist/src/components/ExitSheetWrapper.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setCustomExitComponent = setCustomExitComponent;
+const react_1 = __importDefault(require("react"));
+const ExitConfirmSheet_1 = __importDefault(require("./ExitConfirmSheet"));
+// Module-level variable — set bởi FinosEKYC.setExitSheetComponent()
+let _customComponent = null;
+/**
+ * Set custom exit sheet component.
+ * Gọi trước khi showRNExitSheet để override default ExitConfirmSheet.
+ */
+function setCustomExitComponent(component) {
+    _customComponent = component;
+}
+/**
+ * Wrapper component được SDK auto-register với tên 'SDKExitSheetWrapper'.
+ * Render custom component nếu được set, fallback về ExitConfirmSheet mặc định.
+ */
+const ExitSheetWrapper = (props) => {
+    const Component = _customComponent || ExitConfirmSheet_1.default;
+    return <Component {...props}/>;
+};
+exports.default = ExitSheetWrapper;

package/dist/src/modules/FinosEKYCModule.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SDK_VERSION, SDK_NAME } from '../../EKYCModule';
 import { NfcConfig } from '../types/ekycNFCType';
 import { SDKEkycResultWithEvent, SDKEkycResultStringWithEvent, EKYCError, AppIDType } from '../types/ekycType';
@@ -110,13 +111,31 @@ export declare class FinosEKYCModule {
      */
     resolveExit(action: 'CONFIRM' | 'CANCEL' | 'CLOSE'): Promise<boolean>;
     /**
-     * Show a React Native component as a Bottom Sheet on top of the current activity.
-     * Use this to show a custom RN UI over SDK screens.
+     * Set custom component to render inside the exit bottom sheet.
+     * Thay thế ExitConfirmSheet mặc định bằng component tùy chỉnh.
+     * Không cần AppRegistry — SDK tự lo phần registration.
      *
-     * @param componentName The name registered with AppRegistry.registerComponent
-     * @param props Initial props to pass to the component
+     * @param component React component để hiển thị, hoặc null để về default
+     *
+     * @example
+     * FinosEKYC.setExitSheetComponent(WarningBottomSheet);
+     */
+    setExitSheetComponent(component: React.ComponentType<any> | null): void;
+    /**
+     * Show the exit bottom sheet on top of the current SDK screen.
+     * Mặc định dùng 'SDKExitSheetWrapper' (đã register sẵn trong SDK).
+     *
+     * @param props Props truyền vào component (optional)
+     *
+     * @example
+     * // Dùng default ExitConfirmSheet
+     * FinosEKYC.showRNExitSheet();
+     *
+     * // Dùng custom component (set trước bằng setExitSheetComponent)
+     * FinosEKYC.setExitSheetComponent(WarningBottomSheet);
+     * FinosEKYC.showRNExitSheet();
      */
-    showRNExitSheet(componentName: string, props?: any): Promise<boolean>;
+    showRNExitSheet(props?: any): Promise<boolean>;
     /**
      * Show a native alert dialog on top of the current activity (useful for SDK screens)
      * @param config Dialog configuration { title, message, confirmText, cancelText }

package/dist/src/modules/FinosEKYCModule.js

@@ -38,6 +38,7 @@ const react_native_1 = require("react-native");
 const EKYCModule_1 = __importStar(require("../../EKYCModule"));
 Object.defineProperty(exports, "SDK_VERSION", { enumerable: true, get: function () { return EKYCModule_1.SDK_VERSION; } });
 Object.defineProperty(exports, "SDK_NAME", { enumerable: true, get: function () { return EKYCModule_1.SDK_NAME; } });
+const ExitSheetWrapper_1 = require("../components/ExitSheetWrapper");
 const ekycFlowType_1 = require("../types/ekycFlowType");
 /**
  * Finos eKYC SDK Module
@@ -313,16 +314,36 @@ class FinosEKYCModule {
         }
     }
     /**
-     * Show a React Native component as a Bottom Sheet on top of the current activity.
-     * Use this to show a custom RN UI over SDK screens.
+     * Set custom component to render inside the exit bottom sheet.
+     * Thay thế ExitConfirmSheet mặc định bằng component tùy chỉnh.
+     * Không cần AppRegistry — SDK tự lo phần registration.
      *
-     * @param componentName The name registered with AppRegistry.registerComponent
-     * @param props Initial props to pass to the component
+     * @param component React component để hiển thị, hoặc null để về default
+     *
+     * @example
+     * FinosEKYC.setExitSheetComponent(WarningBottomSheet);
+     */
+    setExitSheetComponent(component) {
+        (0, ExitSheetWrapper_1.setCustomExitComponent)(component);
+    }
+    /**
+     * Show the exit bottom sheet on top of the current SDK screen.
+     * Mặc định dùng 'SDKExitSheetWrapper' (đã register sẵn trong SDK).
+     *
+     * @param props Props truyền vào component (optional)
+     *
+     * @example
+     * // Dùng default ExitConfirmSheet
+     * FinosEKYC.showRNExitSheet();
+     *
+     * // Dùng custom component (set trước bằng setExitSheetComponent)
+     * FinosEKYC.setExitSheetComponent(WarningBottomSheet);
+     * FinosEKYC.showRNExitSheet();
      */
-    async showRNExitSheet(componentName, props = {}) {
+    async showRNExitSheet(props = {}) {
         this.validateSDKReady();
         try {
-            return await this.sdk.showRNExitSheet(componentName, props);
+            return await this.sdk.showRNExitSheet('SDKExitSheetWrapper', props);
         }
         catch (error) {
             console.error('❌ Failed to show RN exit sheet:', error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos_sdk/sdk-ekyc",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "description": "React Native SDK for eKYC - Vietnamese CCCD NFC reading, OCR, Liveness detection, Face matching, and C06, eSign, SmsOTP residence verification",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ExitConfirmSheet.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  NativeModules,
+} from 'react-native';
+import { FinosEKYC } from '../modules/FinosEKYCModule';
+
+const BellIcon = () => (
+  <View style={styles.bellWrapper}>
+    <View style={styles.bellMount} />
+    <View style={styles.bellBody} />
+    <View style={styles.bellSkirt} />
+    <View style={styles.bellClapper} />
+  </View>
+);
+
+const ExitConfirmSheet = (props: any) => {
+  const message = props.message || 'Giao dịch bị hủy khi điều hướng sang tính năng tiếp theo. Quý khách có chắc chắn hủy giao dịch?';
+  const confirmText = props.confirmText || 'Đồng ý';
+  const cancelText = props.cancelText || 'Ở lại';
+
+  const handleConfirm = async () => {
+    await FinosEKYC.resolveExit('CONFIRM');
+  };
+
+  const handleCancel = async () => {
+    await FinosEKYC.resolveExit('CANCEL');
+  };
+
+  return (
+    <View
+      style={styles.container}
+      onLayout={(e) => {
+        const h = e.nativeEvent.layout.height;
+        if (h > 0) NativeModules.EKYCModule?.setExitSheetHeight?.(h);
+      }}
+    >
+      <View style={styles.handle} />
+
+      <View style={styles.content}>
+        <BellIcon />
+        <Text style={styles.message}>{message}</Text>
+      </View>
+
+      <View style={styles.footer}>
+        <TouchableOpacity style={styles.confirmButton} onPress={handleConfirm} activeOpacity={0.8}>
+          <View style={styles.gradientContainer}>
+            <View style={[styles.gradientStep, { backgroundColor: '#E53935' }]} />
+            <View style={[styles.gradientStep, { backgroundColor: '#EA4F28' }]} />
+            <View style={[styles.gradientStep, { backgroundColor: '#EF6519' }]} />
+            <View style={[styles.gradientStep, { backgroundColor: '#F47A0B' }]} />
+            <View style={[styles.gradientStep, { backgroundColor: '#F98F00' }]} />
+            <View style={[styles.gradientStep, { backgroundColor: '#FCA300' }]} />
+            <View style={[styles.gradientStep, { backgroundColor: '#FFB800' }]} />
+            <View style={[styles.gradientStep, { backgroundColor: '#FFCC00' }]} />
+            <View style={[styles.gradientStep, { backgroundColor: '#FFD600' }]} />
+          </View>
+          <Text style={styles.confirmText}>{confirmText}</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={styles.cancelButton} onPress={handleCancel} activeOpacity={0.7}>
+          <Text style={styles.cancelText}>{cancelText}</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    paddingHorizontal: 24,
+    paddingBottom: 32,
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    backgroundColor: '#CCCCCC',
+    borderRadius: 2,
+    alignSelf: 'center',
+    marginTop: 12,
+    marginBottom: 20,
+  },
+  content: {
+    alignItems: 'center',
+    marginBottom: 28,
+  },
+  bellWrapper: {
+    alignItems: 'center',
+    width: 72,
+    height: 72,
+    marginBottom: 20,
+  },
+  bellMount: {
+    width: 9,
+    height: 7,
+    borderRadius: 4,
+    backgroundColor: '#E53935',
+    marginTop: 7,
+  },
+  bellBody: {
+    width: 36,
+    height: 34,
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    backgroundColor: '#E53935',
+    marginTop: -1,
+  },
+  bellSkirt: {
+    width: 48,
+    height: 9,
+    borderBottomLeftRadius: 5,
+    borderBottomRightRadius: 5,
+    backgroundColor: '#E53935',
+  },
+  bellClapper: {
+    width: 12,
+    height: 7,
+    borderBottomLeftRadius: 6,
+    borderBottomRightRadius: 6,
+    backgroundColor: '#E53935',
+    marginTop: 2,
+  },
+  message: {
+    fontSize: 15,
+    color: '#1A1A1A',
+    textAlign: 'center',
+    lineHeight: 19.5,
+  },
+  footer: {
+    width: '100%',
+    gap: 12,
+  },
+  confirmButton: {
+    width: '100%',
+    height: 52,
+    borderRadius: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    elevation: 4,
+    shadowColor: '#E53935',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+  },
+  gradientContainer: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: 'row',
+  },
+  gradientStep: {
+    flex: 1,
+  },
+  confirmText: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#fff',
+  },
+  cancelButton: {
+    width: '100%',
+    height: 52,
+    borderRadius: 24,
+    borderWidth: 1.5,
+    borderColor: '#CCCCCC',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancelText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#555555',
+  },
+});
+
+export default ExitConfirmSheet;

package/src/components/ExitSheetWrapper.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ExitConfirmSheet from './ExitConfirmSheet';
+
+// Module-level variable — set bởi FinosEKYC.setExitSheetComponent()
+let _customComponent: React.ComponentType<any> | null = null;
+
+/**
+ * Set custom exit sheet component.
+ * Gọi trước khi showRNExitSheet để override default ExitConfirmSheet.
+ */
+export function setCustomExitComponent(component: React.ComponentType<any> | null) {
+  _customComponent = component;
+}
+
+/**
+ * Wrapper component được SDK auto-register với tên 'SDKExitSheetWrapper'.
+ * Render custom component nếu được set, fallback về ExitConfirmSheet mặc định.
+ */
+const ExitSheetWrapper = (props: any) => {
+  const Component = _customComponent || ExitConfirmSheet;
+  return <Component {...props} />;
+};
+
+export default ExitSheetWrapper;

package/src/modules/FinosEKYCModule.ts

@@ -1,5 +1,7 @@
+import React from 'react';
 import { Platform, DeviceEventEmitter } from 'react-native';
 import sdkEKYC, { SDKeKYC, SDK_VERSION, SDK_NAME } from '../../EKYCModule';
+import { setCustomExitComponent } from '../components/ExitSheetWrapper';
 import { NfcConfig, NfcError } from '../types/ekycNFCType';
 import { SDKEkycResultWithEvent, SDKEkycResultStringWithEvent, EKYCError, getEkycError, AppIDType } from '../types/ekycType';
 import { C06Config } from '../types/ekycC06Type';
@@ -321,16 +323,37 @@ export class FinosEKYCModule {
     }
 
     /**
-     * Show a React Native component as a Bottom Sheet on top of the current activity.
-     * Use this to show a custom RN UI over SDK screens.
-     * 
-     * @param componentName The name registered with AppRegistry.registerComponent
-     * @param props Initial props to pass to the component
+     * Set custom component to render inside the exit bottom sheet.
+     * Thay thế ExitConfirmSheet mặc định bằng component tùy chỉnh.
+     * Không cần AppRegistry — SDK tự lo phần registration.
+     *
+     * @param component React component để hiển thị, hoặc null để về default
+     *
+     * @example
+     * FinosEKYC.setExitSheetComponent(WarningBottomSheet);
      */
-    public async showRNExitSheet(componentName: string, props: any = {}): Promise<boolean> {
+    public setExitSheetComponent(component: React.ComponentType<any> | null): void {
+        setCustomExitComponent(component);
+    }
+
+    /**
+     * Show the exit bottom sheet on top of the current SDK screen.
+     * Mặc định dùng 'SDKExitSheetWrapper' (đã register sẵn trong SDK).
+     *
+     * @param props Props truyền vào component (optional)
+     *
+     * @example
+     * // Dùng default ExitConfirmSheet
+     * FinosEKYC.showRNExitSheet();
+     *
+     * // Dùng custom component (set trước bằng setExitSheetComponent)
+     * FinosEKYC.setExitSheetComponent(WarningBottomSheet);
+     * FinosEKYC.showRNExitSheet();
+     */
+    public async showRNExitSheet(props: any = {}): Promise<boolean> {
         this.validateSDKReady();
         try {
-            return await this.sdk.showRNExitSheet(componentName, props);
+            return await this.sdk.showRNExitSheet('SDKExitSheetWrapper', props);
         } catch (error) {
             console.error('❌ Failed to show RN exit sheet:', error);
             throw error;