@trustchex/react-native-sdk 1.164.2 → 1.175.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/module/Trustchex.js +73 -80
  2. package/lib/typescript/src/Trustchex.d.ts +2 -1
  3. package/lib/typescript/src/Trustchex.d.ts.map +1 -1
  4. package/package.json +1 -1
  5. package/src/Trustchex.tsx +81 -73
package/lib/module/Trustchex.js CHANGED
@@ -1,22 +1,29 @@
1
1
  "use strict";
2
2
 
3
- import React, { useEffect } from 'react';
3
+ import React, { useEffect, useState, useMemo } from 'react';
4
4
  import { NavigationContainer } from '@react-navigation/native';
5
5
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
6
+ import { View, ActivityIndicator, StyleSheet } from 'react-native';
7
+ import { MD3LightTheme, PaperProvider } from 'react-native-paper';
8
+ import 'react-native-get-random-values';
6
9
  import IdentityDocumentEIDScanningScreen from "./Screens/Dynamic/IdentityDocumentEIDScanningScreen.js";
7
10
  import IdentityDocumentScanningScreen from "./Screens/Dynamic/IdentityDocumentScanningScreen.js";
8
11
  import LivenessDetectionScreen from "./Screens/Dynamic/LivenessDetectionScreen.js";
9
12
  import ResultScreen from "./Screens/Static/ResultScreen.js";
10
13
  import ContractAcceptanceScreen from "./Screens/Dynamic/ContractAcceptanceScreen.js";
11
14
  import VerificationSessionCheckScreen from "./Screens/Static/VerificationSessionCheckScreen.js";
15
+ import QrCodeScanningScreen from "./Screens/Static/QrCodeScanningScreen.js";
12
16
  import AppContext from "./Shared/Contexts/AppContext.js";
13
17
  import i18n from "./Translation/index.js";
14
- import { MD3LightTheme, PaperProvider } from 'react-native-paper';
15
- import 'react-native-get-random-values';
16
- import QrCodeScanningScreen from "./Screens/Static/QrCodeScanningScreen.js";
17
18
  import { initializeTTS } from "./Shared/Libs/tts.utils.js";
18
19
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
19
20
  const Stack = createNativeStackNavigator();
21
+ const DEFAULT_BRANDING = {
22
+ logoUrl: '',
23
+ primaryColor: '#000000',
24
+ secondaryColor: '#CCCCCC',
25
+ tertiaryColor: '#FF0000'
26
+ };
20
27
  const Trustchex = ({
21
28
  baseUrl: propBaseUrl,
22
29
  sessionId: propSessionId,
@@ -25,15 +32,39 @@ const Trustchex = ({
25
32
  onCompleted,
26
33
  onError
27
34
  }) => {
28
- const [baseUrl, setBaseUrl] = React.useState(propBaseUrl);
29
- const [sessionId, setSessionId] = React.useState(propSessionId || '');
30
- const [branding, setBranding] = React.useState({
31
- logoUrl: propBranding?.logoUrl || '',
32
- primaryColor: propBranding?.primaryColor || '#000000',
33
- secondaryColor: propBranding?.secondaryColor || '#CCCCCC',
34
- tertiaryColor: propBranding?.tertiaryColor || '#FF0000'
35
- });
36
- const [locale, setLocale] = React.useState(propLocale || i18n.language);
35
+ const [baseUrl, setBaseUrl] = useState(null);
36
+ const [sessionId, setSessionId] = useState(null);
37
+ const [locale, setLocale] = useState(propLocale || i18n.language);
38
+ const branding = useMemo(() => ({
39
+ ...DEFAULT_BRANDING,
40
+ ...propBranding
41
+ }), [propBranding]);
42
+ const theme = useMemo(() => ({
43
+ ...MD3LightTheme,
44
+ colors: {
45
+ ...MD3LightTheme.colors,
46
+ primary: branding.primaryColor,
47
+ secondary: branding.secondaryColor,
48
+ tertiary: branding.tertiaryColor
49
+ }
50
+ }), [branding]);
51
+ const contextValue = useMemo(() => ({
52
+ isDemoSession: false,
53
+ baseUrl,
54
+ locale,
55
+ branding,
56
+ identificationInfo: {
57
+ sessionId,
58
+ identificationId: '',
59
+ consent: {
60
+ contractIds: [],
61
+ deviceInfo: ''
62
+ },
63
+ locale: propLocale || i18n.language
64
+ },
65
+ onCompleted,
66
+ onError
67
+ }), [baseUrl, locale, branding, sessionId, propLocale, onCompleted, onError]);
37
68
  useEffect(() => {
38
69
  initializeTTS();
39
70
  }, []);
@@ -53,97 +84,59 @@ const Trustchex = ({
53
84
  i18n.changeLanguage(propLocale);
54
85
  }
55
86
  }, [propLocale]);
56
- useEffect(() => {
57
- setBranding({
58
- logoUrl: propBranding?.logoUrl || '',
59
- primaryColor: propBranding?.primaryColor || '#000000',
60
- secondaryColor: propBranding?.secondaryColor || '#CCCCCC',
61
- tertiaryColor: propBranding?.tertiaryColor || '#FF0000'
87
+ if (!baseUrl) {
88
+ return /*#__PURE__*/_jsx(View, {
89
+ style: styles.loadingContainer,
90
+ children: /*#__PURE__*/_jsx(ActivityIndicator, {
91
+ size: "large",
92
+ color: branding.primaryColor
93
+ })
62
94
  });
63
- }, [propBranding]);
95
+ }
64
96
  return /*#__PURE__*/_jsx(PaperProvider, {
65
- theme: {
66
- ...MD3LightTheme,
67
- colors: {
68
- ...MD3LightTheme.colors,
69
- primary: branding.primaryColor,
70
- secondary: branding.secondaryColor,
71
- tertiary: branding.tertiaryColor
72
- }
73
- },
97
+ theme: theme,
74
98
  children: /*#__PURE__*/_jsx(AppContext.Provider, {
75
- value: {
76
- isDemoSession: false,
77
- baseUrl,
78
- locale,
79
- branding: {
80
- primaryColor: branding.primaryColor,
81
- secondaryColor: branding.secondaryColor,
82
- tertiaryColor: branding.tertiaryColor,
83
- logoUrl: branding.logoUrl
84
- },
85
- identificationInfo: {
86
- sessionId: sessionId,
87
- identificationId: '',
88
- consent: {
89
- contractIds: [],
90
- deviceInfo: ''
91
- },
92
- locale: propLocale || i18n.language
93
- },
94
- onCompleted,
95
- onError
96
- },
99
+ value: contextValue,
97
100
  children: /*#__PURE__*/_jsx(NavigationContainer, {
98
101
  children: /*#__PURE__*/_jsxs(Stack.Navigator, {
99
- initialRouteName: "VerificationSessionCheckScreen",
100
102
  id: undefined,
103
+ initialRouteName: "VerificationSessionCheckScreen",
104
+ screenOptions: {
105
+ headerShown: false
106
+ },
101
107
  children: [/*#__PURE__*/_jsx(Stack.Screen, {
102
108
  name: "VerificationSessionCheckScreen",
103
- component: VerificationSessionCheckScreen,
104
- options: {
105
- headerShown: false
106
- }
109
+ component: VerificationSessionCheckScreen
107
110
  }), /*#__PURE__*/_jsx(Stack.Screen, {
108
111
  name: "ContractAcceptanceScreen",
109
- component: ContractAcceptanceScreen,
110
- options: {
111
- headerShown: false
112
- }
112
+ component: ContractAcceptanceScreen
113
113
  }), /*#__PURE__*/_jsx(Stack.Screen, {
114
114
  name: "IdentityDocumentScanningScreen",
115
- component: IdentityDocumentScanningScreen,
116
- options: {
117
- headerShown: false
118
- }
115
+ component: IdentityDocumentScanningScreen
119
116
  }), /*#__PURE__*/_jsx(Stack.Screen, {
120
117
  name: "IdentityDocumentEIDScanningScreen",
121
- component: IdentityDocumentEIDScanningScreen,
122
- options: {
123
- headerShown: false
124
- }
118
+ component: IdentityDocumentEIDScanningScreen
125
119
  }), /*#__PURE__*/_jsx(Stack.Screen, {
126
120
  name: "LivenessDetectionScreen",
127
- component: LivenessDetectionScreen,
128
- options: {
129
- headerShown: false
130
- }
121
+ component: LivenessDetectionScreen
131
122
  }), /*#__PURE__*/_jsx(Stack.Screen, {
132
123
  name: "ResultScreen",
133
- component: ResultScreen,
134
- options: {
135
- headerShown: false
136
- }
124
+ component: ResultScreen
137
125
  }), /*#__PURE__*/_jsx(Stack.Screen, {
138
126
  name: "QrCodeScanningScreen",
139
- component: QrCodeScanningScreen,
140
- options: {
141
- headerShown: false
142
- }
127
+ component: QrCodeScanningScreen
143
128
  })]
144
129
  })
145
130
  })
146
131
  })
147
132
  });
148
133
  };
134
+ const styles = StyleSheet.create({
135
+ loadingContainer: {
136
+ flex: 1,
137
+ justifyContent: 'center',
138
+ alignItems: 'center',
139
+ backgroundColor: 'white'
140
+ }
141
+ });
149
142
  export default Trustchex;
package/lib/typescript/src/Trustchex.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import 'react-native-get-random-values';
2
3
  interface TrustchexBranding {
3
4
  logoUrl?: string;
@@ -13,6 +14,6 @@ interface TrustchexProps {
13
14
  onCompleted?: () => void;
14
15
  onError?: (error: string) => void;
15
16
  }
16
- declare const Trustchex: ({ baseUrl: propBaseUrl, sessionId: propSessionId, branding: propBranding, locale: propLocale, onCompleted, onError, }: TrustchexProps) => import("react/jsx-runtime").JSX.Element;
17
+ declare const Trustchex: React.FC<TrustchexProps>;
17
18
  export default Trustchex;
18
19
  //# sourceMappingURL=Trustchex.d.ts.map
package/lib/typescript/src/Trustchex.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Trustchex.d.ts","sourceRoot":"","sources":["../../../src/Trustchex.tsx"],"names":[],"mappings":"AAYA,OAAO,gCAAgC,CAAC;AAMxC,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,QAAA,MAAM,SAAS,GAAI,uHAOhB,cAAc,4CA+HhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"Trustchex.d.ts","sourceRoot":"","sources":["../../../src/Trustchex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,OAAO,gCAAgC,CAAC;AAexC,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AASD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4HvC,CAAC;AAWF,eAAe,SAAS,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trustchex/react-native-sdk",
3
- "version": "1.164.2",
3
+ "version": "1.175.2",
4
4
  "description": "Trustchex mobile app react native SDK for android or ios devices",
5
5
  "main": "./lib/module/index.js",
6
6
  "types": "./lib/typescript/src/index.d.ts",
package/src/Trustchex.tsx CHANGED
@@ -1,17 +1,19 @@
1
- import React, { useEffect } from 'react';
1
+ import React, { useEffect, useState, useMemo } from 'react';
2
2
  import { NavigationContainer } from '@react-navigation/native';
3
3
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
4
+ import { View, ActivityIndicator, StyleSheet } from 'react-native';
5
+ import { MD3LightTheme, PaperProvider } from 'react-native-paper';
6
+ import 'react-native-get-random-values';
7
+
4
8
  import IdentityDocumentEIDScanningScreen from './Screens/Dynamic/IdentityDocumentEIDScanningScreen';
5
9
  import IdentityDocumentScanningScreen from './Screens/Dynamic/IdentityDocumentScanningScreen';
6
10
  import LivenessDetectionScreen from './Screens/Dynamic/LivenessDetectionScreen';
7
11
  import ResultScreen from './Screens/Static/ResultScreen';
8
12
  import ContractAcceptanceScreen from './Screens/Dynamic/ContractAcceptanceScreen';
9
13
  import VerificationSessionCheckScreen from './Screens/Static/VerificationSessionCheckScreen';
14
+ import QrCodeScanningScreen from './Screens/Static/QrCodeScanningScreen';
10
15
  import AppContext from './Shared/Contexts/AppContext';
11
16
  import i18n from './Translation';
12
- import { MD3LightTheme, PaperProvider } from 'react-native-paper';
13
- import 'react-native-get-random-values';
14
- import QrCodeScanningScreen from './Screens/Static/QrCodeScanningScreen';
15
17
  import { initializeTTS } from './Shared/Libs/tts.utils';
16
18
 
17
19
  const Stack = createNativeStackNavigator();
@@ -32,24 +34,66 @@ interface TrustchexProps {
32
34
  onError?: (error: string) => void;
33
35
  }
34
36
 
35
- const Trustchex = ({
37
+ const DEFAULT_BRANDING: TrustchexBranding = {
38
+ logoUrl: '',
39
+ primaryColor: '#000000',
40
+ secondaryColor: '#CCCCCC',
41
+ tertiaryColor: '#FF0000',
42
+ };
43
+
44
+ const Trustchex: React.FC<TrustchexProps> = ({
36
45
  baseUrl: propBaseUrl,
37
46
  sessionId: propSessionId,
38
47
  branding: propBranding,
39
48
  locale: propLocale,
40
49
  onCompleted,
41
50
  onError,
42
- }: TrustchexProps) => {
43
- const [baseUrl, setBaseUrl] = React.useState(propBaseUrl);
44
- const [sessionId, setSessionId] = React.useState(propSessionId || '');
45
- const [branding, setBranding] = React.useState<TrustchexBranding>({
46
- logoUrl: propBranding?.logoUrl || '',
47
- primaryColor: propBranding?.primaryColor || '#000000',
48
- secondaryColor: propBranding?.secondaryColor || '#CCCCCC',
49
- tertiaryColor: propBranding?.tertiaryColor || '#FF0000',
50
- });
51
-
52
- const [locale, setLocale] = React.useState(propLocale || i18n.language);
51
+ }) => {
52
+ const [baseUrl, setBaseUrl] = useState<string | null>(null);
53
+ const [sessionId, setSessionId] = useState<string | null>(null);
54
+ const [locale, setLocale] = useState(propLocale || i18n.language);
55
+
56
+ const branding = useMemo(
57
+ () => ({
58
+ ...DEFAULT_BRANDING,
59
+ ...propBranding,
60
+ }),
61
+ [propBranding]
62
+ );
63
+
64
+ const theme = useMemo(
65
+ () => ({
66
+ ...MD3LightTheme,
67
+ colors: {
68
+ ...MD3LightTheme.colors,
69
+ primary: branding.primaryColor,
70
+ secondary: branding.secondaryColor,
71
+ tertiary: branding.tertiaryColor,
72
+ },
73
+ }),
74
+ [branding]
75
+ );
76
+
77
+ const contextValue = useMemo(
78
+ () => ({
79
+ isDemoSession: false,
80
+ baseUrl,
81
+ locale,
82
+ branding,
83
+ identificationInfo: {
84
+ sessionId,
85
+ identificationId: '',
86
+ consent: {
87
+ contractIds: [],
88
+ deviceInfo: '',
89
+ },
90
+ locale: propLocale || i18n.language,
91
+ },
92
+ onCompleted,
93
+ onError,
94
+ }),
95
+ [baseUrl, locale, branding, sessionId, propLocale, onCompleted, onError]
96
+ );
53
97
 
54
98
  useEffect(() => {
55
99
  initializeTTS();
@@ -74,92 +118,47 @@ const Trustchex = ({
74
118
  }
75
119
  }, [propLocale]);
76
120
 
77
- useEffect(() => {
78
- setBranding({
79
- logoUrl: propBranding?.logoUrl || '',
80
- primaryColor: propBranding?.primaryColor || '#000000',
81
- secondaryColor: propBranding?.secondaryColor || '#CCCCCC',
82
- tertiaryColor: propBranding?.tertiaryColor || '#FF0000',
83
- });
84
- }, [propBranding]);
121
+ if (!baseUrl) {
122
+ return (
123
+ <View style={styles.loadingContainer}>
124
+ <ActivityIndicator size="large" color={branding.primaryColor} />
125
+ </View>
126
+ );
127
+ }
85
128
 
86
129
  return (
87
- <PaperProvider
88
- theme={{
89
- ...MD3LightTheme,
90
- colors: {
91
- ...MD3LightTheme.colors,
92
- primary: branding.primaryColor,
93
- secondary: branding.secondaryColor,
94
- tertiary: branding.tertiaryColor,
95
- },
96
- }}
97
- >
98
- <AppContext.Provider
99
- value={{
100
- isDemoSession: false,
101
- baseUrl,
102
- locale,
103
- branding: {
104
- primaryColor: branding.primaryColor,
105
- secondaryColor: branding.secondaryColor,
106
- tertiaryColor: branding.tertiaryColor,
107
- logoUrl: branding.logoUrl,
108
- },
109
- identificationInfo: {
110
- sessionId: sessionId,
111
- identificationId: '',
112
- consent: {
113
- contractIds: [],
114
- deviceInfo: '',
115
- },
116
- locale: propLocale || i18n.language,
117
- },
118
- onCompleted,
119
- onError,
120
- }}
121
- >
130
+ <PaperProvider theme={theme}>
131
+ <AppContext.Provider value={contextValue}>
122
132
  <NavigationContainer>
123
133
  <Stack.Navigator
124
- initialRouteName="VerificationSessionCheckScreen"
125
134
  id={undefined}
135
+ initialRouteName="VerificationSessionCheckScreen"
136
+ screenOptions={{ headerShown: false }}
126
137
  >
127
138
  <Stack.Screen
128
139
  name="VerificationSessionCheckScreen"
129
140
  component={VerificationSessionCheckScreen}
130
- options={{ headerShown: false }}
131
141
  />
132
142
  <Stack.Screen
133
143
  name="ContractAcceptanceScreen"
134
144
  component={ContractAcceptanceScreen}
135
- options={{ headerShown: false }}
136
145
  />
137
146
  <Stack.Screen
138
147
  name="IdentityDocumentScanningScreen"
139
148
  component={IdentityDocumentScanningScreen}
140
- options={{ headerShown: false }}
141
149
  />
142
150
  <Stack.Screen
143
151
  name="IdentityDocumentEIDScanningScreen"
144
152
  component={IdentityDocumentEIDScanningScreen}
145
- options={{ headerShown: false }}
146
153
  />
147
154
  <Stack.Screen
148
155
  name="LivenessDetectionScreen"
149
156
  component={LivenessDetectionScreen}
150
- options={{ headerShown: false }}
151
- />
152
- <Stack.Screen
153
- name="ResultScreen"
154
- component={ResultScreen}
155
- options={{ headerShown: false }}
156
157
  />
158
+ <Stack.Screen name="ResultScreen" component={ResultScreen} />
157
159
  <Stack.Screen
158
160
  name="QrCodeScanningScreen"
159
161
  component={QrCodeScanningScreen}
160
- options={{
161
- headerShown: false,
162
- }}
163
162
  />
164
163
  </Stack.Navigator>
165
164
  </NavigationContainer>
@@ -168,4 +167,13 @@ const Trustchex = ({
168
167
  );
169
168
  };
170
169
 
170
+ const styles = StyleSheet.create({
171
+ loadingContainer: {
172
+ flex: 1,
173
+ justifyContent: 'center',
174
+ alignItems: 'center',
175
+ backgroundColor: 'white',
176
+ },
177
+ });
178
+
171
179
  export default Trustchex;