remove lazy loading

.github/workflows/mobile-ci.yml

@@ -160,7 +160,11 @@ jobs:
             packages/mobile-sdk-alpha/dist
           key: built-deps-${{ env.GH_CACHE_VERSION }}-${{ env.NODE_VERSION_SANITIZED }}-${{ hashFiles('common/**/*', 'packages/mobile-sdk-alpha/**/*', '!common/dist/**', '!packages/mobile-sdk-alpha/dist/**') }}
       - name: Test
-        run: yarn test
+        run: |
+          # Always ensure dependencies are built before running tests
+          echo "Building dependencies before running tests..."
+          yarn workspace @selfxyz/mobile-app run build:deps
+          yarn test
         working-directory: ./app
   build-ios:
     runs-on: macos-latest-large

.github/workflows/web.yml

@@ -22,4 +22,4 @@ jobs:
         shell: bash
         run: yarn workspace @selfxyz/common build
       - name: Build web app
-        run: yarn web:build
+        run: yarn workspace @selfxyz/mobile-app web:build

app/jest.config.cjs

@@ -6,7 +6,7 @@ module.exports = {
   preset: 'react-native',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   transformIgnorePatterns: [
-    'node_modules/(?!(react-native|@react-native|@react-navigation|@react-native-community|@segment/analytics-react-native|@openpassport|react-native-keychain|react-native-check-version|react-native-nfc-manager|react-native-passport-reader|react-native-gesture-handler|uuid|@stablelib|@react-native-google-signin|react-native-cloud-storage|@react-native-clipboard|@react-native-firebase|@selfxyz)/)',
+    'node_modules/(?!(react-native|@react-native|@react-navigation|@react-native-community|@segment/analytics-react-native|@openpassport|react-native-keychain|react-native-check-version|react-native-nfc-manager|react-native-passport-reader|react-native-gesture-handler|uuid|@stablelib|@react-native-google-signin|react-native-cloud-storage|@react-native-clipboard|@react-native-firebase|@selfxyz|@sentry)/)',
   ],
   setupFiles: ['<rootDir>/jest.setup.js'],
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$',

app/src/components/homeScreen/SvgXmlWrapper.tsx

@@ -0,0 +1,43 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import React, { createElement, forwardRef } from 'react';
+import { Platform } from 'react-native';
+
+// Platform-specific SvgXml component
+const SvgXmlWrapper = forwardRef<
+  HTMLDivElement | SVGSVGElement,
+  {
+    xml: string;
+    width?: number;
+    height?: number;
+    style?: React.CSSProperties;
+  }
+>(({ xml, width, height, style, ...props }, ref) => {
+  if (Platform.OS === 'web') {
+    // Use our mock for web
+    return createElement('div', {
+      ref,
+      style: {
+        width: width || 'auto',
+        height: height || 'auto',
+        display: 'inline-block',
+        ...style,
+      },
+      dangerouslySetInnerHTML: { __html: xml },
+      ...props,
+    });
+  }
+
+  // Use the real SvgXml for native platforms
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const { SvgXml } = require('react-native-svg');
+  return (
+    <SvgXml xml={xml} width={width} height={height} style={style} {...props} />
+  );
+});
+
+SvgXmlWrapper.displayName = 'SvgXmlWrapper';
+
+export { SvgXmlWrapper as SvgXml };

app/src/components/homeScreen/idCard.tsx

@@ -2,20 +2,20 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import React, { useCallback, useState } from 'react';
 import { Dimensions, Pressable } from 'react-native';
-import { SvgXml } from 'react-native-svg';
 import { Button, Image, Separator, Text, XStack, YStack } from 'tamagui';
 import { useFocusEffect } from '@react-navigation/native';
 
 import {
   attributeToPosition,
   attributeToPosition_ID,
-  formatMrz,
-  PassportData,
-} from '@selfxyz/common/dist/esm';
-import { pad } from '@selfxyz/common/dist/esm/src/utils/passports/passport';
+} from '@selfxyz/common/constants';
+import { PassportData } from '@selfxyz/common/types';
+import { formatMrz } from '@selfxyz/common/utils';
+import { pad } from '@selfxyz/common/utils/passports/passport';
 
+import { SvgXml } from '@/components/homeScreen/SvgXmlWrapper';
 import EPassport from '@/images/icons/epassport.svg';
 import LogoGray from '@/images/logo_gray.svg';
 import LogoInversed from '@/images/logo_inversed.svg';

app/src/mocks/react-native-community-blur.ts

@@ -0,0 +1,31 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import React from 'react';
+
+// Mock BlurView component for web builds
+export const BlurView = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    blurType?: string;
+    blurAmount?: number;
+    reducedTransparencyFallbackColor?: string;
+  }
+>(({ children, style, ...props }, ref) => {
+  return React.createElement(
+    'div',
+    {
+      ref,
+      style: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        backdropFilter: 'blur(10px)',
+        ...style,
+      },
+      ...props,
+    },
+    children,
+  );
+});
+
+BlurView.displayName = 'BlurView';

app/src/mocks/react-native-svg.ts

@@ -0,0 +1,67 @@
+// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+import React from 'react';
+
+export const Circle = React.forwardRef<
+  SVGCircleElement,
+  React.SVGProps<SVGCircleElement>
+>((props, ref) => {
+  return React.createElement('circle', { ref, ...props });
+});
+
+Circle.displayName = 'Circle';
+
+export const Path = React.forwardRef<
+  SVGPathElement,
+  React.SVGProps<SVGPathElement>
+>((props, ref) => {
+  return React.createElement('path', { ref, ...props });
+});
+
+Path.displayName = 'Path';
+
+export const Rect = React.forwardRef<
+  SVGRectElement,
+  React.SVGProps<SVGRectElement>
+>((props, ref) => {
+  return React.createElement('rect', { ref, ...props });
+});
+
+Rect.displayName = 'Rect';
+
+// Re-export other common SVG components that might be used
+export const Svg = React.forwardRef<
+  SVGSVGElement,
+  React.SVGProps<SVGSVGElement>
+>((props, ref) => {
+  return React.createElement('svg', { ref, ...props });
+});
+
+Svg.displayName = 'Svg';
+
+// Mock SvgXml component for web builds
+export const SvgXml = React.forwardRef<
+  HTMLDivElement,
+  {
+    xml: string;
+    width?: number;
+    height?: number;
+    style?: React.CSSProperties;
+  }
+>(({ xml, width, height, style, ...props }, ref) => {
+  return React.createElement('div', {
+    ref,
+    style: {
+      width: width || 'auto',
+      height: height || 'auto',
+      display: 'inline-block',
+      ...style,
+    },
+    dangerouslySetInnerHTML: { __html: xml },
+    ...props,
+  });
+});
+
+SvgXml.displayName = 'SvgXml';

app/src/navigation/aesop.ts

@@ -2,17 +2,13 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import { lazy } from 'react';
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 
 import { ProgressNavBar } from '@/components/NavBar';
 import { shouldShowAesopRedesign } from '@/hooks/useAesopRedesign';
+import DocumentOnboardingScreen from '@/screens/aesop/DocumentOnboardingScreen';
 import { white } from '@/utils/colors';
 
-const DocumentOnboardingScreen = lazy(
-  () => import('@/screens/aesop/DocumentOnboardingScreen'),
-);
-
 const aesopScreens = {
   DocumentOnboarding: {
     screen: DocumentOnboardingScreen,

app/src/navigation/devTools.ts

@@ -2,26 +2,16 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import { lazy } from 'react';
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 
+import CreateMockScreen from '@/screens/dev/CreateMockScreen';
+import CreateMockScreenDeepLink from '@/screens/dev/CreateMockScreenDeepLink';
+import DevFeatureFlagsScreen from '@/screens/dev/DevFeatureFlagsScreen';
+import DevHapticFeedbackScreen from '@/screens/dev/DevHapticFeedbackScreen';
+import DevPrivateKeyScreen from '@/screens/dev/DevPrivateKeyScreen';
+import DevSettingsScreen from '@/screens/dev/DevSettingsScreen';
 import { black, white } from '@/utils/colors';
 
-const DevFeatureFlagsScreen = lazy(
-  () => import('@/screens/dev/DevFeatureFlagsScreen'),
-);
-const DevHapticFeedbackScreen = lazy(
-  () => import('@/screens/dev/DevHapticFeedbackScreen'),
-);
-const DevPrivateKeyScreen = lazy(
-  () => import('@/screens/dev/DevPrivateKeyScreen'),
-);
-const DevSettingsScreen = lazy(() => import('@/screens/dev/DevSettingsScreen'));
-const CreateMockScreen = lazy(() => import('@/screens/dev/CreateMockScreen'));
-const CreateMockScreenDeepLink = lazy(
-  () => import('@/screens/dev/CreateMockScreenDeepLink'),
-);
-
 const devHeaderOptions: NativeStackNavigationOptions = {
   headerStyle: {
     backgroundColor: black,

app/src/navigation/document.ts

@@ -2,30 +2,15 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import { lazy } from 'react';
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 
-const DocumentCameraScreen = lazy(
-  () => import('@/screens/document/DocumentCameraScreen'),
-);
-const DocumentCameraTroubleScreen = lazy(
-  () => import('@/screens/document/DocumentCameraTroubleScreen'),
-);
-const DocumentNFCScanScreen = lazy(
-  () => import('@/screens/document/DocumentNFCScanScreen'),
-);
-const DocumentNFCTroubleScreen = lazy(
-  () => import('@/screens/document/DocumentNFCTroubleScreen'),
-);
-const DocumentOnboardingScreen = lazy(
-  () => import('@/screens/document/DocumentOnboardingScreen'),
-);
-const UnsupportedDocumentScreen = lazy(
-  () => import('@/screens/document/UnsupportedDocumentScreen'),
-);
-const DocumentNFCMethodSelectionScreen = lazy(
-  () => import('@/screens/document/DocumentNFCMethodSelectionScreen'),
-);
+import DocumentCameraScreen from '@/screens/document/DocumentCameraScreen';
+import DocumentCameraTroubleScreen from '@/screens/document/DocumentCameraTroubleScreen';
+import DocumentNFCMethodSelectionScreen from '@/screens/document/DocumentNFCMethodSelectionScreen';
+import DocumentNFCScanScreen from '@/screens/document/DocumentNFCScanScreen';
+import DocumentNFCTroubleScreen from '@/screens/document/DocumentNFCTroubleScreen';
+import DocumentOnboardingScreen from '@/screens/document/DocumentOnboardingScreen';
+import UnsupportedDocumentScreen from '@/screens/document/UnsupportedDocumentScreen';
 
 const documentScreens = {
   DocumentCamera: {

app/src/navigation/home.ts

@@ -2,20 +2,15 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import { lazy } from 'react';
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 
 import { HomeNavBar, IdDetailsNavBar } from '@/components/NavBar';
+import DisclaimerScreen from '@/screens/home/DisclaimerScreen';
+import HomeScreen from '@/screens/home/HomeScreen';
+import IdDetailsScreen from '@/screens/home/IdDetailsScreen';
+import ProofHistoryDetailScreen from '@/screens/home/ProofHistoryDetailScreen';
+import ProofHistoryScreen from '@/screens/home/ProofHistoryScreen';
 
-const DisclaimerScreen = lazy(() => import('@/screens/home/DisclaimerScreen'));
-const HomeScreen = lazy(() => import('@/screens/home/HomeScreen'));
-const ProofHistoryDetailScreen = lazy(
-  () => import('@/screens/home/ProofHistoryDetailScreen'),
-);
-const ProofHistoryScreen = lazy(
-  () => import('@/screens/home/ProofHistoryScreen'),
-);
-const IdDetailsScreen = lazy(() => import('@/screens/home/IdDetailsScreen'));
 const homeScreens = {
   Disclaimer: {
     screen: DisclaimerScreen,

app/src/navigation/index.tsx

@@ -2,10 +2,9 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import React, { Suspense, useEffect } from 'react';
-import { Platform, View } from 'react-native';
+import React, { useEffect } from 'react';
+import { Platform } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { Text } from 'tamagui';
 import type { StaticParamList } from '@react-navigation/native';
 import {
   createNavigationContainerRef,
@@ -63,17 +62,6 @@ declare global {
 const { trackScreenView } = analytics();
 const Navigation = createStaticNavigation(AppNavigation);
 
-const SuspenseFallback = () => {
-  if (Platform.OS === 'web') {
-    return <div>Loading...</div>;
-  }
-  return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <Text>Loading...</Text>
-    </View>
-  );
-};
-
 const NavigationWithTracking = () => {
   const trackScreen = () => {
     const currentRoute = navigationRef.getCurrentRoute();
@@ -96,9 +84,7 @@ const NavigationWithTracking = () => {
 
   return (
     <GestureHandlerRootView>
-      <Suspense fallback={<SuspenseFallback />}>
-        <Navigation ref={navigationRef} onStateChange={trackScreen} />
-      </Suspense>
+      <Navigation ref={navigationRef} onStateChange={trackScreen} />
     </GestureHandlerRootView>
   );
 };