Move DocumentCamera screen to the SDK

app/metro.config.cjs

@@ -66,6 +66,9 @@ const config = {
       new RegExp('packages/mobile-sdk-alpha/node_modules/react(/|$)'),
       new RegExp('packages/mobile-sdk-alpha/node_modules/react-dom(/|$)'),
       new RegExp('packages/mobile-sdk-alpha/node_modules/react-native(/|$)'),
+      new RegExp(
+        'packages/mobile-sdk-alpha/node_modules/lottie-react-native(/|$)',
+      ),
       new RegExp('packages/mobile-sdk-alpha/node_modules/scheduler(/|$)'),
       new RegExp('packages/mobile-sdk-demo/node_modules/react(/|$)'),
       new RegExp('packages/mobile-sdk-demo/node_modules/react-dom(/|$)'),

app/src/components/loading/LoadingUI.tsx

@@ -7,7 +7,8 @@ import React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Text, View, XStack, YStack } from 'tamagui';
 
-import { DelayedLottieView } from '@/components/DelayedLottieView';
+import { DelayedLottieView } from '@selfxyz/mobile-sdk-alpha';
+
 import CloseWarningIcon from '@/images/icons/close-warning.svg';
 import Plus from '@/images/icons/plus_slate600.svg';
 import {

app/src/layouts/ExpandableBottomLayout.tsx

@@ -3,51 +3,32 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import React from 'react';
-import {
-  Dimensions,
-  PixelRatio,
-  Platform,
-  ScrollView,
-  StyleSheet,
-} from 'react-native';
 import { SystemBars } from 'react-native-edge-to-edge';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { ViewProps } from 'tamagui';
-import { View } from 'tamagui';
 
-import { black, white } from '@/utils/colors';
-import { extraYPadding } from '@/utils/constants';
+import type {
+  BottomSectionProps,
+  FullSectionProps,
+  LayoutProps,
+  TopSectionProps,
+} from '@selfxyz/mobile-sdk-alpha';
+import { ExpandableBottomLayout as BaseExpandableBottomLayout } from '@selfxyz/mobile-sdk-alpha';
 
-// Get the current font scale factor
-const fontScale = PixelRatio.getFontScale();
-// fontScale > 1 means the user has increased text size in accessibility settings
-const isLargerTextEnabled = fontScale > 1.3;
+import { black } from '@/utils/colors';
 
-interface ExpandableBottomLayoutProps extends ViewProps {
-  children: React.ReactNode;
-  backgroundColor: string;
-}
-
-interface TopSectionProps extends ViewProps {
-  children: React.ReactNode;
-  backgroundColor: string;
-  roundTop?: boolean;
-}
-
-interface BottomSectionProps extends ViewProps {
-  children: React.ReactNode;
-  backgroundColor: string;
-}
-
-const Layout: React.FC<ExpandableBottomLayoutProps> = ({
+const Layout: React.FC<LayoutProps> = ({
   children,
   backgroundColor,
+  ...props
 }) => {
   return (
-    <View flex={1} flexDirection="column" backgroundColor={backgroundColor}>
+    <BaseExpandableBottomLayout.Layout
+      backgroundColor={backgroundColor}
+      {...props}
+    >
       <SystemBars style={backgroundColor === black ? 'light' : 'dark'} />
       {children}
-    </View>
+    </BaseExpandableBottomLayout.Layout>
   );
 };
 
@@ -57,24 +38,18 @@ const TopSection: React.FC<TopSectionProps> = ({
   ...props
 }) => {
   const { top } = useSafeAreaInsets();
-  const { roundTop, ...restProps } = props;
+
   return (
-    <View
-      {...restProps}
+    <BaseExpandableBottomLayout.TopSection
       backgroundColor={backgroundColor}
-      style={[
-        styles.topSection,
-        roundTop && styles.roundTop,
-        roundTop ? { marginTop: top } : { paddingTop: top },
-        { backgroundColor },
-      ]}
+      safeAreaTop={top}
+      {...props}
     >
       {children}
-    </View>
+    </BaseExpandableBottomLayout.TopSection>
   );
 };
 
-type FullSectionProps = ViewProps;
 /*
  * Rather than using a top and bottom section, this component is te entire thing.
  * It leave space for the safe area insets and provides basic padding
@@ -85,108 +60,42 @@ const FullSection: React.FC<FullSectionProps> = ({
   ...props
 }: FullSectionProps) => {
   const { top, bottom } = useSafeAreaInsets();
+
   return (
-    <View
-      paddingHorizontal={20}
+    <BaseExpandableBottomLayout.FullSection
       backgroundColor={backgroundColor}
-      paddingTop={top}
-      paddingBottom={bottom}
+      safeAreaTop={top}
+      safeAreaBottom={bottom}
       {...props}
     >
       {children}
-    </View>
+    </BaseExpandableBottomLayout.FullSection>
   );
 };
 
 const BottomSection: React.FC<BottomSectionProps> = ({
   children,
-  style,
   ...props
 }) => {
   const { bottom: safeAreaBottom } = useSafeAreaInsets();
-  const incomingBottom = props.paddingBottom ?? 0;
-  const minBottom = safeAreaBottom + extraYPadding;
-  const totalBottom =
-    typeof incomingBottom === 'number' ? minBottom + incomingBottom : minBottom;
-
-  let panelHeight: number | 'auto' = 'auto';
-  // set bottom section height to 38% of screen height
-  // and wrap children in a scroll view if larger text is enabled
-  if (isLargerTextEnabled) {
-    const windowHeight = Dimensions.get('window').height;
-    panelHeight = windowHeight * 0.38;
-    children = (
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={{ flexGrow: 1 }}
-      >
-        {children}
-      </ScrollView>
-    );
-  }
 
   return (
-    <View
+    <BaseExpandableBottomLayout.BottomSection
+      safeAreaBottom={safeAreaBottom}
       {...props}
-      height={panelHeight}
-      style={[styles.bottomSection, style]}
-      paddingBottom={totalBottom}
     >
       {children}
-    </View>
+    </BaseExpandableBottomLayout.BottomSection>
   );
 };
 
 /**
- * This component is a layout that has a top and bottom section. Bottom section
- * automatically expands to as much space as it needs while the top section
- * takes up the remaining space.
- *
- * Usage:
- *
- * import { ExpandableBottomLayout } from '../components/ExpandableBottomLayout';
- *
- * <ExpandableBottomLayout.Layout>
- *   <ExpandableBottomLayout.TopSection>
- *     <...top section content...>
- *   </ExpandableBottomLayout.TopSection>
- *   <ExpandableBottomLayout.BottomSection>
- *     <...bottom section content...>
- *   </ExpandableBottomLayout.BottomSection>
- * </ExpandableBottomLayout.Layout>
+ * This component is a wrapper around the ExpandableBottomLayout component from the mobile SDK
+ * pacakge. It handles the safe area insets and system bars.
  */
 export const ExpandableBottomLayout = {
   Layout,
   TopSection,
   FullSection,
   BottomSection,
 };
-
-const styles = StyleSheet.create({
-  roundTop: {
-    marginTop: 12,
-    overflow: 'hidden',
-    borderTopRightRadius: 30,
-    borderTopLeftRadius: 30,
-  },
-  layout: {
-    height: '100%',
-    flexDirection: 'column',
-  },
-  topSection: {
-    alignSelf: 'stretch',
-    flexGrow: 1,
-    flexShrink: Platform.select({ web: 0, default: 1 }),
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: black,
-    overflow: 'hidden',
-    padding: 20,
-  },
-  bottomSection: {
-    backgroundColor: white,
-    paddingTop: 30,
-    paddingLeft: 20,
-    paddingRight: 20,
-  },
-});

app/src/providers/selfClientProvider.tsx

@@ -6,17 +6,15 @@ import type { PropsWithChildren } from 'react';
 import { useMemo } from 'react';
 import { Platform } from 'react-native';
 
-import type {
-  Adapters,
-  TrackEventParams,
-  WsConn,
-} from '@selfxyz/mobile-sdk-alpha';
 import {
+  type Adapters,
   createListenersMap,
   reactNativeScannerAdapter,
   SdkEvents,
   SelfClientProvider as SDKSelfClientProvider,
+  type TrackEventParams,
   webNFCScannerShim,
+  type WsConn,
 } from '@selfxyz/mobile-sdk-alpha';
 
 import type { RootStackParamList } from '@/navigation';

app/src/screens/app/SplashScreen.tsx

@@ -8,12 +8,12 @@ import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import {
+  DelayedLottieView,
   hasAnyValidRegisteredDocument,
   useSelfClient,
 } from '@selfxyz/mobile-sdk-alpha';
 
 import splashAnimation from '@/assets/animations/splash.json';
-import { DelayedLottieView } from '@/components/DelayedLottieView';
 import type { RootStackParamList } from '@/navigation';
 import { migrateToSecureKeychain, useAuth } from '@/providers/authProvider';
 import {

app/src/screens/documents/scanning/DocumentCameraScreen.tsx

@@ -8,6 +8,7 @@ import { View, XStack, YStack } from 'tamagui';
 import { useIsFocused } from '@react-navigation/native';
 
 import {
+  DelayedLottieView,
   hasAnyValidRegisteredDocument,
   useSelfClient,
 } from '@selfxyz/mobile-sdk-alpha';
@@ -24,7 +25,6 @@ import {
 } from '@selfxyz/mobile-sdk-alpha/onboarding/read-mrz';
 
 import passportScanAnimation from '@/assets/animations/passport_scan.json';
-import { DelayedLottieView } from '@/components/DelayedLottieView';
 import { PassportCamera } from '@/components/native/PassportCamera';
 import useHapticNavigation from '@/hooks/useHapticNavigation';
 import Scan from '@/images/icons/passport_camera_scan.svg';

app/src/screens/documents/selection/ConfirmBelongingScreen.tsx

@@ -7,7 +7,11 @@ import type { StaticScreenProps } from '@react-navigation/native';
 import { usePreventRemove } from '@react-navigation/native';
 
 import type { DocumentCategory } from '@selfxyz/common/utils/types';
-import { loadSelectedDocument, useSelfClient } from '@selfxyz/mobile-sdk-alpha';
+import {
+  DelayedLottieView,
+  loadSelectedDocument,
+  useSelfClient,
+} from '@selfxyz/mobile-sdk-alpha';
 import {
   Description,
   PrimaryButton,
@@ -20,7 +24,6 @@ import {
 import { getPreRegistrationDescription } from '@selfxyz/mobile-sdk-alpha/onboarding/confirm-identification';
 
 import successAnimation from '@/assets/animations/loading/success.json';
-import { DelayedLottieView } from '@/components/DelayedLottieView';
 import useHapticNavigation from '@/hooks/useHapticNavigation';
 import { ExpandableBottomLayout } from '@/layouts/ExpandableBottomLayout';
 import { styles } from '@/screens/verification/ProofRequestStatusScreen';

app/src/screens/onboarding/AccountVerifiedSuccessScreen.tsx

@@ -7,6 +7,7 @@ import { YStack } from 'tamagui';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
+import { DelayedLottieView } from '@selfxyz/mobile-sdk-alpha';
 import {
   Description,
   PrimaryButton,
@@ -15,7 +16,6 @@ import {
 import { BackupEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
 
 import proofSuccessAnimation from '@/assets/animations/proof_success.json';
-import { DelayedLottieView } from '@/components/DelayedLottieView';
 import { ExpandableBottomLayout } from '@/layouts/ExpandableBottomLayout';
 import type { RootStackParamList } from '@/navigation';
 import { styles } from '@/screens/verification/ProofRequestStatusScreen';

app/src/screens/onboarding/DisclaimerScreen.tsx

@@ -8,6 +8,7 @@ import { YStack } from 'tamagui';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
+import { DelayedLottieView } from '@selfxyz/mobile-sdk-alpha';
 import {
   Caution,
   PrimaryButton,
@@ -16,7 +17,6 @@ import {
 import { AppEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
 
 import warningAnimation from '@/assets/animations/warning.json';
-import { DelayedLottieView } from '@/components/DelayedLottieView';
 import { ExpandableBottomLayout } from '@/layouts/ExpandableBottomLayout';
 import type { RootStackParamList } from '@/navigation';
 import { useSettingStore } from '@/stores/settingStore';

packages/mobile-sdk-alpha/package.json

@@ -137,6 +137,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-sort-exports": "^0.9.1",
     "jsdom": "^25.0.1",
+    "lottie-react-native": "7.2.2",
     "prettier": "^3.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -149,6 +150,7 @@
     "vitest": "^2.1.8"
   },
   "peerDependencies": {
+    "lottie-react-native": "7.2.2",
     "react": "^18.3.1",
     "react-native": "0.76.9",
     "react-native-haptic-feedback": "*",