@trustchex/react-native-sdk 1.354.1 → 1.357.0

package/lib/module/Screens/Static/OTPVerificationScreen.js

@@ -1,9 +1,9 @@
 "use strict";
 
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useRef, useState } from 'react';
 import { SafeAreaView, Text, StyleSheet, Alert, View, Image, Dimensions, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useRoute } from '@react-navigation/native';
+import { useRoute, useFocusEffect } from '@react-navigation/native';
 import AppContext from "../../Shared/Contexts/AppContext.js";
 import httpClient, { BadRequestError, NotFoundError, TooManyRequestsError } from "../../Shared/Libs/http-client.js";
 import { useTranslation } from 'react-i18next';
@@ -48,9 +48,9 @@ const OTPVerificationScreen = () => {
     });
   }
   const apiUrl = `${appContext.baseUrl}/api/app/mobile`;
-  const sendVerificationCode = useCallback(async sessionId => {
+  const sendVerificationCode = useCallback(async id => {
     try {
-      await httpClient.post(`${apiUrl}/verification-sessions/${sessionId}`, {}, appContext.isDemoSession ? getSimulatedDemoData('SEND_VERIFICATION_CODE') : undefined);
+      await httpClient.post(`${apiUrl}/verification-sessions/${id}`, {}, appContext.isDemoSession ? getSimulatedDemoData('SEND_VERIFICATION_CODE') : undefined);
       return true;
     } catch (error) {
       if (error instanceof NotFoundError) {
@@ -67,9 +67,9 @@ const OTPVerificationScreen = () => {
     }
     return false;
   }, [apiUrl, appContext.isDemoSession, t]);
-  const getVerifiedSession = useCallback(async (sessionId, verificationCode) => {
+  const getVerifiedSession = useCallback(async (id, verificationCode) => {
     try {
-      const response = await httpClient.post(`${apiUrl}/verification-sessions/${sessionId}`, {
+      const response = await httpClient.post(`${apiUrl}/verification-sessions/${id}`, {
         code: verificationCode
       }, appContext.isDemoSession ? getSimulatedDemoData('GET_VERIFIED_SESSION', {
         code: verificationCode
@@ -88,11 +88,11 @@ const OTPVerificationScreen = () => {
       }
     }
   }, [apiUrl, appContext.isDemoSession, t]);
-  const sendOTPCode = useCallback(async sessionId => {
-    if (!sessionId) {
+  const sendOTPCode = useCallback(async id => {
+    if (!id) {
       return false;
     }
-    const isSent = await sendVerificationCode(sessionId);
+    const isSent = await sendVerificationCode(id);
     if (!isSent) {
       return false;
     }
@@ -102,12 +102,12 @@ const OTPVerificationScreen = () => {
     }, 3 * 60 * 1000);
     return true;
   }, [sendVerificationCode]);
-  useEffect(() => {
+  useFocusEffect(useCallback(() => {
     if (!initialized.current && sessionId) {
       initialized.current = true;
       sendOTPCode(sessionId);
     }
-  }, [sessionId, sendOTPCode]);
+  }, [sessionId, sendOTPCode]));
   return /*#__PURE__*/_jsx(SafeAreaView, {
     style: styles.safeAreaContainer,
     children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {

package/lib/module/Screens/Static/QrCodeScanningScreen.js

@@ -28,10 +28,14 @@ const QrCodeScanningScreen = () => {
       navigation.navigate('VerificationSessionCheckScreen');
     }
   };
+  const onClose = () => {
+    navigation.goBack();
+  };
   return /*#__PURE__*/_jsx(SafeAreaView, {
     style: styles.container,
     children: /*#__PURE__*/_jsx(QrCodeScannerCamera, {
-      onQrCodeScanned: onQrCodeScanned
+      onQrCodeScanned: onQrCodeScanned,
+      onClose: onClose
     })
   });
 };

package/lib/module/Screens/Static/ResultScreen.js

@@ -103,7 +103,6 @@ const ResultScreen = () => {
   const submitIdentificationConsent = useCallback(async (identificationId, sessionKey) => {
     // Ensure device info is always populated before sending consent
     if (!appContext.identificationInfo.consent.deviceInfo) {
-      console.log('Device info not set, generating now...');
       appContext.identificationInfo.consent.deviceInfo = await NativeDeviceInfo.generateHumanReadableIdentifier();
     }
     const {
@@ -128,7 +127,6 @@ const ResultScreen = () => {
       country: scannedDocument.mrzFields.issuingState,
       barcodeValue: scannedDocument.barcodeValue,
       personalNumber: scannedDocument.mrzFields.personalNumber || scannedDocument.mrzFields.optional1,
-      issueDate: mrzUtils.convertMRZDateToISODate(scannedDocument.mrzFields.issueDate),
       birthDate: mrzUtils.convertMRZDateToISODate(scannedDocument.mrzFields.birthDate),
       expiryDate: mrzUtils.convertMRZDateToISODate(scannedDocument.mrzFields.expirationDate),
       dataSource: scannedDocument.dataSource,
@@ -238,10 +236,6 @@ const ResultScreen = () => {
         }
         await RNFS.copyFile(livenessVideoPath, videoFilePath);
 
-        // Get original file size
-        const originalStats = await RNFS.stat(videoFilePath);
-        const originalSize = originalStats.size;
-
         // Compress video with maximum compression settings
         const compressedVideoPath = await VideoCompressor.compress(videoFilePath, {
           compressionMethod: 'manual',
@@ -257,12 +251,6 @@ const ResultScreen = () => {
 
         // Convert file:// URI to regular path for RNFS upload
         const normalizedPath = compressedVideoPath.replace('file://', '');
-
-        // Get compressed file size and log difference
-        const compressedStats = await RNFS.stat(normalizedPath);
-        const compressedSize = compressedStats.size;
-        const compressionRatio = ((originalSize - compressedSize) / originalSize * 100).toFixed(2);
-        console.log(`Video compression: ${(originalSize / 1024 / 1024).toFixed(2)}MB -> ${(compressedSize / 1024 / 1024).toFixed(2)}MB (${compressionRatio}% reduction)`);
         uploadFileOptions.files.push({
           name: 'files',
           filename: 'LIVENESS_VIDEO.mp4',
@@ -473,6 +461,15 @@ const ResultScreen = () => {
                   style: styles.mrzTextValue,
                   children: appContext.identificationInfo.scannedDocument.mrzText
                 })]
+              }), appContext.identificationInfo.scannedDocument.barcodeValue && /*#__PURE__*/_jsxs(View, {
+                style: styles.mrzTextContainer,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.mrzTextLabel,
+                  children: "Barcode Value"
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.mrzTextValue,
+                  children: appContext.identificationInfo.scannedDocument.barcodeValue
+                })]
               }), /*#__PURE__*/_jsx(Text, {
                 style: styles.sectionText,
                 children: t('resultScreen.demoImages')
@@ -569,7 +566,22 @@ const ResultScreen = () => {
                       }
                     }), /*#__PURE__*/_jsx(Text, {
                       style: styles.imageText,
-                      children: t('resultScreen.demoInstruction_' + instruction.instruction.toLowerCase())
+                      children: (() => {
+                        switch (instruction.instruction) {
+                          case 'SMILE':
+                            return t('livenessDetectionScreen.smile');
+                          case 'LOOK_STRAIGHT_AND_BLINK':
+                            return t('livenessDetectionScreen.lookStraightAndBlink');
+                          case 'TURN_HEAD_LEFT':
+                            return t('livenessDetectionScreen.turnHeadLeft');
+                          case 'TURN_HEAD_RIGHT':
+                            return t('livenessDetectionScreen.turnHeadRight');
+                          case 'LOOK_UP':
+                            return t('livenessDetectionScreen.lookUp');
+                          default:
+                            return instruction.instruction;
+                        }
+                      })()
                     })]
                   }, index))
                 })

package/lib/module/Screens/Static/VerificationSessionCheckScreen.js

@@ -14,7 +14,7 @@ import { analyticsService } from "../../Shared/Services/AnalyticsService.js";
 import { useTheme } from "../../Shared/Contexts/ThemeContext.js";
 import LottieView from 'lottie-react-native';
 import { getSimulatedDemoData, isDemoSession } from "../../Shared/Libs/demo.utils.js";
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import { SESSION_CODE_CHARSET_PATTERN, SESSION_CODE_VALIDATION_PATTERN } from "../../Shared/Constants/validation.constants.js";
 import { trackError, trackFunnelStep, useScreenTracking } from "../../Shared/Libs/analytics.utils.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -86,6 +86,14 @@ const VerificationSessionCheckScreen = () => {
       sessionId
     });
   }, [navigation]);
+
+  // Reset initialized flag when screen is focused and sessionId is empty (after reset)
+  useFocusEffect(useCallback(() => {
+    if (!appContext.identificationInfo.sessionId) {
+      initialized.current = false;
+      isCheckingSessionRef.current = false;
+    }
+  }, [appContext.identificationInfo.sessionId]));
   useEffect(() => {
     // Only run this effect if sessionId exists AND we're not currently checking a session
     // This prevents race condition when session code is entered
@@ -94,15 +102,25 @@ const VerificationSessionCheckScreen = () => {
       isCheckingSessionRef.current = true;
       setIsCheckingSession(true);
       getSession(appContext.identificationInfo.sessionId).then(session => {
-        appContext.workflowSteps = session?.workflowSteps;
-        if (session?.branding) {
+        if (!session) {
+          // Session not found - clear the sessionId and reset flags to allow retry
+          Alert.alert(t('general.error'), t('verificationSessionCheckScreen.noVerificationSessionFound'));
+          appContext.identificationInfo.sessionId = '';
+          if (appContext.setSessionId) {
+            appContext.setSessionId('');
+          }
+          initialized.current = false;
+          return;
+        }
+        appContext.workflowSteps = session.workflowSteps;
+        if (session.branding) {
           appContext.branding = appContext.branding || session.branding;
         }
-        if (session?.sendOTP) {
+        if (session.sendOTP) {
           navigateToOTPScreen(session.id);
         } else {
-          if (session?.identificationId) {
-            appContext.identificationInfo.identificationId = session?.identificationId;
+          if (session.identificationId) {
+            appContext.identificationInfo.identificationId = session.identificationId;
           }
           navigationManagerRef.current?.navigateToNextStep();
         }
@@ -113,7 +131,7 @@ const VerificationSessionCheckScreen = () => {
         }, 1000);
       });
     }
-  }, [appContext, appContext.identificationInfo.sessionId, getSession, navigateToOTPScreen]);
+  }, [appContext, appContext.identificationInfo.sessionId, getSession, navigateToOTPScreen, t]);
   return /*#__PURE__*/_jsx(SafeAreaView, {
     style: styles.safeAreaContainer,
     children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {

package/lib/module/Shared/Components/DebugNavigationPanel.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useCallback, useContext, useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Platform } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Platform, Switch } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import AppContext from "../Contexts/AppContext.js";
@@ -9,24 +9,28 @@ import { getSimulatedDemoData } from "../Libs/demo.utils.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Icon mapping matching Flutter SDK Material Icons
 const ICONS = {
-  LOGIN: '🔑',
-  // Icons.login
-  HANDSHAKE: '🤝',
-  // Icons.handshake
-  CREDIT_CARD: '💳',
-  // Icons.credit_card
-  NFC: '📡',
-  // Icons.nfc
-  FACE: '👤',
-  // Icons.face
-  CHECK_CIRCLE: '✅',
-  // Icons.check_circle
+  LOGIN: '�',
+  // Icons.login - Locked with key for session security
+  HANDSHAKE: '📝',
+  // Icons.handshake - Document for contract signing
+  CREDIT_CARD: '🪪',
+  // Icons.credit_card - ID card for document scan
+  NFC: '💳',
+  // Icons.nfc - Contactless card for eID
+  FACE: '📸',
+  // Icons.face - Camera for face detection
+  CHECK_CIRCLE: '📋',
+  // Icons.check_circle - Clipboard for results
   BUG_REPORT: '🔧',
-  // Icons.bug_report (using wrench for debug)
-  PHONE: '📱' // Icons.phone
+  // Icons.bug_report - Wrench for debugging
+  PHONE: '💬' // Icons.phone - Message for OTP code
 };
 const DebugNavigationPanel = () => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const [selectedScreen, setSelectedScreen] = useState(null);
+  const [voiceGuidanceEnabled, setVoiceGuidanceEnabled] = useState(true);
+  const [allowIdCard, setAllowIdCard] = useState(true);
+  const [allowPassport, setAllowPassport] = useState(true);
   const navigation = useNavigation();
   const appContext = useContext(AppContext);
   const insets = useSafeAreaInsets();
@@ -40,6 +44,38 @@ const DebugNavigationPanel = () => {
     const demoSession = getSimulatedDemoData('GET_SESSION');
     appContext.workflowSteps = demoSession.workflowSteps;
   }, [appContext]);
+  const applyVoiceGuidance = useCallback(enabled => {
+    if (!appContext.workflowSteps) return;
+    appContext.workflowSteps = appContext.workflowSteps.map(step => ({
+      ...step,
+      data: {
+        ...step.data,
+        voiceGuidanceActive: enabled
+      }
+    }));
+    if (appContext.currentWorkflowStep) {
+      appContext.currentWorkflowStep = {
+        ...appContext.currentWorkflowStep,
+        data: {
+          ...appContext.currentWorkflowStep.data,
+          voiceGuidanceActive: enabled
+        }
+      };
+    }
+  }, [appContext]);
+  const applyDocumentTypes = useCallback((allowId, allowPass) => {
+    if (!appContext.currentWorkflowStep) return;
+    const allowedTypes = [];
+    if (allowId) allowedTypes.push('I');
+    if (allowPass) allowedTypes.push('P');
+    appContext.currentWorkflowStep = {
+      ...appContext.currentWorkflowStep,
+      data: {
+        ...appContext.currentWorkflowStep.data,
+        allowedDocumentTypes: allowedTypes.length === 2 ? null : allowedTypes
+      }
+    };
+  }, [appContext]);
   const screens = [{
     screen: 'VerificationSessionCheckScreen',
     label: 'Session Check',
@@ -58,6 +94,7 @@ const DebugNavigationPanel = () => {
     screen: 'ContractAcceptanceScreen',
     label: 'Consent',
     icon: ICONS.HANDSHAKE,
+    hasOptions: true,
     setupDemo: () => {
       setupDemoSession(true);
       // Set current workflow step to contract acceptance so demo contract URLs are loaded
@@ -70,22 +107,39 @@ const DebugNavigationPanel = () => {
     screen: 'IdentityDocumentScanningScreen',
     label: 'ID Scan',
     icon: ICONS.CREDIT_CARD,
+    hasOptions: true,
+    hasDocumentTypeOption: true,
     setupDemo: () => {
       setupDemoSession(true);
+      const step = appContext.workflowSteps?.find(s => s.type === 'IDENTITY_DOCUMENT_SCAN');
+      if (step) {
+        appContext.currentWorkflowStep = step;
+      }
     }
   }, {
     screen: 'IdentityDocumentEIDScanningScreen',
     label: 'eID Scan',
     icon: ICONS.NFC,
+    hasOptions: true,
+    hasDocumentTypeOption: true,
     setupDemo: () => {
       setupDemoSession(true);
+      const step = appContext.workflowSteps?.find(s => s.type === 'IDENTITY_DOCUMENT_EID_SCAN');
+      if (step) {
+        appContext.currentWorkflowStep = step;
+      }
     }
   }, {
     screen: 'LivenessDetectionScreen',
     label: 'Liveness',
     icon: ICONS.FACE,
+    hasOptions: true,
     setupDemo: () => {
       setupDemoSession(true);
+      const step = appContext.workflowSteps?.find(s => s.type === 'LIVENESS_CHECK');
+      if (step) {
+        appContext.currentWorkflowStep = step;
+      }
     }
   }, {
     screen: 'ResultScreen',
@@ -95,13 +149,44 @@ const DebugNavigationPanel = () => {
       setupDemoSession();
     }
   }];
-  const jumpToScreen = useCallback(screen => {
-    if (screen.setupDemo) {
-      screen.setupDemo();
+  const selectScreen = useCallback(screen => {
+    if (!screen.hasOptions) {
+      if (screen.setupDemo) {
+        screen.setupDemo();
+      }
+      navigation.navigate(screen.screen, screen.params);
+      setIsExpanded(false);
+      return;
     }
-    navigation.navigate(screen.screen, screen.params);
-    setIsExpanded(false);
+    setSelectedScreen(screen);
+    setVoiceGuidanceEnabled(true);
+    setAllowIdCard(true);
+    setAllowPassport(true);
   }, [navigation]);
+  const jumpToScreen = useCallback(() => {
+    if (!selectedScreen) return;
+
+    // Validate document type selection for document scanning screens
+    if (selectedScreen.hasDocumentTypeOption && !allowIdCard && !allowPassport) {
+      // Don't navigate if no document types are selected
+      return;
+    }
+    if (selectedScreen.setupDemo) {
+      selectedScreen.setupDemo();
+    }
+    // Apply voice guidance AFTER setupDemo to avoid overwriting
+    applyVoiceGuidance(voiceGuidanceEnabled);
+    // Apply document types if it's a document scanning screen
+    if (selectedScreen.hasDocumentTypeOption) {
+      applyDocumentTypes(allowIdCard, allowPassport);
+    }
+    navigation.navigate(selectedScreen.screen, selectedScreen.params);
+    setIsExpanded(false);
+    setSelectedScreen(null);
+    setVoiceGuidanceEnabled(true);
+    setAllowIdCard(true);
+    setAllowPassport(true);
+  }, [navigation, selectedScreen, voiceGuidanceEnabled, allowIdCard, allowPassport, applyVoiceGuidance, applyDocumentTypes]);
 
   // Only show in development mode
   if (!__DEV__) {
@@ -116,9 +201,76 @@ const DebugNavigationPanel = () => {
       children: [/*#__PURE__*/_jsx(Text, {
         style: styles.title,
         children: "SDK JUMP TO SCREEN:"
-      }), screens.map(screen => /*#__PURE__*/_jsxs(TouchableOpacity, {
+      }), selectedScreen ? /*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: styles.optionsTitle,
+          children: [selectedScreen.icon, " ", selectedScreen.label]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.optionRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.optionLabel,
+            children: "\uD83D\uDD0A Voice Guidance"
+          }), /*#__PURE__*/_jsx(Switch, {
+            value: voiceGuidanceEnabled,
+            onValueChange: setVoiceGuidanceEnabled,
+            trackColor: {
+              false: '#616161',
+              true: '#FF5252'
+            },
+            thumbColor: "white"
+          })]
+        }), selectedScreen.hasDocumentTypeOption && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.optionRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.optionLabel,
+              children: "\uD83E\uDEAA Allow ID Card"
+            }), /*#__PURE__*/_jsx(Switch, {
+              value: allowIdCard,
+              onValueChange: setAllowIdCard,
+              trackColor: {
+                false: '#616161',
+                true: '#FF5252'
+              },
+              thumbColor: "white"
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.optionRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.optionLabel,
+              children: "\uD83D\uDEC2 Allow Passport"
+            }), /*#__PURE__*/_jsx(Switch, {
+              value: allowPassport,
+              onValueChange: setAllowPassport,
+              trackColor: {
+                false: '#616161',
+                true: '#FF5252'
+              },
+              thumbColor: "white"
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionRow,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.backButton,
+            onPress: () => setSelectedScreen(null),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.backButtonText,
+              children: "\u25C0 Back"
+            })
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.goButton, selectedScreen.hasDocumentTypeOption && !allowIdCard && !allowPassport && styles.goButtonDisabled],
+            onPress: jumpToScreen,
+            disabled: selectedScreen.hasDocumentTypeOption && !allowIdCard && !allowPassport,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.goButtonText, selectedScreen.hasDocumentTypeOption && !allowIdCard && !allowPassport && styles.goButtonTextDisabled],
+              children: "Go \u25B6"
+            })
+          })]
+        })]
+      }) : screens.map(screen => /*#__PURE__*/_jsxs(TouchableOpacity, {
         style: styles.screenButton,
-        onPress: () => jumpToScreen(screen),
+        onPress: () => selectScreen(screen),
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.screenIcon,
           children: screen.icon
@@ -129,7 +281,13 @@ const DebugNavigationPanel = () => {
       }, screen.screen))]
     }), /*#__PURE__*/_jsxs(TouchableOpacity, {
       style: styles.toggleButton,
-      onPress: () => setIsExpanded(!isExpanded),
+      onPress: () => {
+        setIsExpanded(!isExpanded);
+        setSelectedScreen(null);
+        setVoiceGuidanceEnabled(true);
+        setAllowIdCard(true);
+        setAllowPassport(true);
+      },
       children: [/*#__PURE__*/_jsx(Text, {
         style: styles.bugIcon,
         children: ICONS.BUG_REPORT
@@ -202,7 +360,7 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     borderWidth: 1,
     borderColor: 'rgba(255, 82, 82, 0.5)',
-    minWidth: 180,
+    minWidth: 200,
     ...Platform.select({
       ios: {
         shadowColor: '#000',
@@ -247,6 +405,58 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: '500',
     flex: 1
+  },
+  optionsTitle: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 12
+  },
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 6,
+    marginBottom: 12
+  },
+  optionLabel: {
+    color: 'white',
+    fontSize: 13
+  },
+  actionRow: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  backButton: {
+    flex: 1,
+    backgroundColor: '#616161',
+    paddingVertical: 8,
+    borderRadius: 4,
+    alignItems: 'center'
+  },
+  backButtonText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: '500'
+  },
+  goButton: {
+    flex: 1,
+    backgroundColor: '#FF5252',
+    paddingVertical: 8,
+    borderRadius: 4,
+    alignItems: 'center'
+  },
+  goButtonDisabled: {
+    backgroundColor: '#9E9E9E',
+    opacity: 0.5
+  },
+  goButtonText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold'
+  },
+  goButtonTextDisabled: {
+    color: '#CCCCCC'
   }
 });
 export default DebugNavigationPanel;