@hexar/biometric-identity-sdk-react-native 1.3.0 → 1.4.0

package/dist/components/FacePositioningGuide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FacePositioningGuide.d.ts","sourceRoot":"","sources":["../../src/components/FacePositioningGuide.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAOL,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAA2B,MAAM,oCAAoC,CAAC;AAE7G,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,OAAO,CAAC,EAAE,SAAS,CAAC;KACrB,CAAC;CACH;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqEpE,CAAC;AA0HF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"FacePositioningGuide.d.ts","sourceRoot":"","sources":["../../src/components/FacePositioningGuide.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAOL,SAAS,EAEV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAA2B,MAAM,oCAAoC,CAAC;AAI7G,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,OAAO,CAAC,EAAE,SAAS,CAAC;KACrB,CAAC;CACH;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAwEpE,CAAC;AA+FF,eAAe,oBAAoB,CAAC"}

package/dist/components/FacePositioningGuide.js

@@ -13,6 +13,7 @@ exports.FacePositioningGuide = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const biometric_identity_sdk_core_1 = require("@hexar/biometric-identity-sdk-core");
+const FACE_GUIDE_IMAGE = require('../assets/images/face-biometry.png');
 const FacePositioningGuide = ({ theme, language, onContinue, onCancel, styles: customStyles, }) => {
     if (language) {
         (0, biometric_identity_sdk_core_1.setLanguage)(language);
@@ -40,45 +41,15 @@ const FacePositioningGuide = ({ theme, language, onContinue, onCancel, styles: c
         react_1.default.createElement(react_native_1.ScrollView, { contentContainerStyle: [styles.scrollContent, customStyles?.content], showsVerticalScrollIndicator: false },
             react_1.default.createElement(react_native_1.Text, { style: [styles.title, { color: textColor }] }, title),
             react_1.default.createElement(react_native_1.Text, { style: [styles.description, { color: secondaryTextColor }] }, description),
-            react_1.default.createElement(react_native_1.View, { style: styles.ovalWrapper },
-                react_1.default.createElement(react_native_1.View, { style: [styles.oval, { borderColor: primaryColor }] },
-                    react_1.default.createElement(FaceIcon, { color: secondaryTextColor }))),
+            react_1.default.createElement(react_native_1.View, { style: styles.imageWrapper },
+                react_1.default.createElement(react_native_1.View, { style: styles.imageShadowContainer },
+                    react_1.default.createElement(react_native_1.Image, { source: FACE_GUIDE_IMAGE, style: styles.guideImage, resizeMode: "contain" }))),
             react_1.default.createElement(react_native_1.View, { style: [styles.tipBox, { borderColor: primaryColor + '30', backgroundColor: primaryColor + '08' }] },
                 react_1.default.createElement(react_native_1.Text, { style: [styles.tipText, { color: secondaryTextColor }] }, tip)),
             react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.continueButton, { backgroundColor: primaryColor }], onPress: onContinue, activeOpacity: 0.85 },
                 react_1.default.createElement(react_native_1.Text, { style: styles.continueButtonText }, continueLabel)))));
 };
 exports.FacePositioningGuide = FacePositioningGuide;
-/** Simple geometric face icon (head + eyes) when react-native-svg is not used */
-const FaceIcon = ({ color }) => (react_1.default.createElement(react_native_1.View, { style: faceIconStyles.container },
-    react_1.default.createElement(react_native_1.View, { style: [faceIconStyles.head, { backgroundColor: color }] }),
-    react_1.default.createElement(react_native_1.View, { style: faceIconStyles.eyes },
-        react_1.default.createElement(react_native_1.View, { style: [faceIconStyles.eye, { backgroundColor: color }] }),
-        react_1.default.createElement(react_native_1.View, { style: [faceIconStyles.eye, { backgroundColor: color }] }))));
-const faceIconStyles = react_native_1.StyleSheet.create({
-    container: {
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    head: {
-        width: 80,
-        height: 100,
-        borderRadius: 50,
-        opacity: 0.4,
-    },
-    eyes: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        width: 44,
-        marginTop: -70,
-        opacity: 0.5,
-    },
-    eye: {
-        width: 12,
-        height: 12,
-        borderRadius: 6,
-    },
-});
 const createStyles = (vars) => react_native_1.StyleSheet.create({
     container: {
         flex: 1,
@@ -113,18 +84,27 @@ const createStyles = (vars) => react_native_1.StyleSheet.create({
         marginBottom: 28,
         paddingHorizontal: 8,
     },
-    ovalWrapper: {
+    imageWrapper: {
         marginBottom: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
-    oval: {
+    imageShadowContainer: {
         width: 260,
         height: 320,
-        borderRadius: 160,
-        borderWidth: 3,
-        alignItems: 'center',
-        justifyContent: 'center',
+        borderRadius: 130,
+        backgroundColor: 'transparent',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.25,
+        shadowRadius: 12,
+        elevation: 12,
         overflow: 'hidden',
     },
+    guideImage: {
+        width: '100%',
+        height: '100%',
+    },
     tipBox: {
         paddingVertical: 14,
         paddingHorizontal: 20,

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@hexar/biometric-identity-sdk-react-native",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "React Native wrapper for Biometric Identity SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && cp -r src/assets dist/",
     "dev": "tsc --watch",
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
-    "@hexar/biometric-identity-sdk-core": ">=1.2.0",
+    "@hexar/biometric-identity-sdk-core": ">=1.3.0",
     "react": ">=18.0.0",
     "react-native": ">=0.70.0",
     "react-native-permissions": ">=4.0.0",

package/src/components/FacePositioningGuide.tsx

@@ -14,9 +14,12 @@ import {
   ScrollView,
   SafeAreaView,
   ViewStyle,
+  Image,
 } from 'react-native';
 import { ThemeConfig, SupportedLanguage, getStrings, setLanguage } from '@hexar/biometric-identity-sdk-core';
 
+const FACE_GUIDE_IMAGE = require('../assets/images/face-biometry.png');
+
 export interface FacePositioningGuideProps {
   theme?: ThemeConfig;
   language?: SupportedLanguage;
@@ -76,10 +79,13 @@ export const FacePositioningGuide: React.FC<FacePositioningGuideProps> = ({
           {description}
         </Text>
 
-        {/* Oval frame with face icon inside */}
-        <View style={styles.ovalWrapper}>
-          <View style={[styles.oval, { borderColor: primaryColor }]}>
-            <FaceIcon color={secondaryTextColor} />
+        <View style={styles.imageWrapper}>
+          <View style={styles.imageShadowContainer}>
+            <Image
+              source={FACE_GUIDE_IMAGE}
+              style={styles.guideImage}
+              resizeMode="contain"
+            />
           </View>
         </View>
 
@@ -99,42 +105,6 @@ export const FacePositioningGuide: React.FC<FacePositioningGuideProps> = ({
   );
 };
 
-/** Simple geometric face icon (head + eyes) when react-native-svg is not used */
-const FaceIcon: React.FC<{ color: string }> = ({ color }) => (
-  <View style={faceIconStyles.container}>
-    <View style={[faceIconStyles.head, { backgroundColor: color }]} />
-    <View style={faceIconStyles.eyes}>
-      <View style={[faceIconStyles.eye, { backgroundColor: color }]} />
-      <View style={[faceIconStyles.eye, { backgroundColor: color }]} />
-    </View>
-  </View>
-);
-
-const faceIconStyles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  head: {
-    width: 80,
-    height: 100,
-    borderRadius: 50,
-    opacity: 0.4,
-  },
-  eyes: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: 44,
-    marginTop: -70,
-    opacity: 0.5,
-  },
-  eye: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-  },
-});
-
 const createStyles = (vars: {
   primaryColor: string;
   textColor: string;
@@ -175,18 +145,27 @@ const createStyles = (vars: {
       marginBottom: 28,
       paddingHorizontal: 8,
     },
-    ovalWrapper: {
+    imageWrapper: {
       marginBottom: 24,
+      alignItems: 'center',
+      justifyContent: 'center',
     },
-    oval: {
+    imageShadowContainer: {
       width: 260,
       height: 320,
-      borderRadius: 160,
-      borderWidth: 3,
-      alignItems: 'center',
-      justifyContent: 'center',
+      borderRadius: 130,
+      backgroundColor: 'transparent',
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.25,
+      shadowRadius: 12,
+      elevation: 12,
       overflow: 'hidden',
     },
+    guideImage: {
+      width: '100%',
+      height: '100%',
+    },
     tipBox: {
       paddingVertical: 14,
       paddingHorizontal: 20,