[SELF-770] App/id picker flow

app/src/components/NavBar/BaseNavBar.tsx

@@ -98,7 +98,6 @@ const Container: React.FC<NavBarProps> = ({
       <SystemBars style={barStyle} />
       <XStack
         backgroundColor={backgroundColor}
-        flexGrow={1}
         justifyContent="flex-start"
         alignItems="center"
         {...props}

app/src/components/NavBar/DocumentFlowNavBar.tsx

@@ -0,0 +1,46 @@
+// 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';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useNavigation } from '@react-navigation/native';
+import { HelpCircle } from '@tamagui/lucide-icons';
+
+import { NavBar } from '@/components/NavBar/BaseNavBar';
+import { slate100 } from '@/utils/colors';
+import { dinot } from '@/utils/fonts';
+
+export const DocumentFlowNavBar = ({
+  title,
+  titleFontFamily = dinot,
+  fontSize = 17,
+}: {
+  title: string;
+  titleFontFamily?: string;
+  fontSize?: number;
+}) => {
+  const navigation = useNavigation();
+  const { top } = useSafeAreaInsets();
+
+  return (
+    <NavBar.Container
+      paddingTop={top}
+      backgroundColor={slate100}
+      paddingHorizontal="$4"
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <NavBar.LeftAction component="back" onPress={() => navigation.goBack()} />
+      <NavBar.Title fontFamily={titleFontFamily} fontSize={fontSize}>
+        {title}
+      </NavBar.Title>
+      <NavBar.RightAction
+        component={<HelpCircle color={'transparent'} />}
+        onPress={() => {
+          /* Handle help action, button is transparent for now as we dont have the help screen ready */
+        }}
+      />
+    </NavBar.Container>
+  );
+};

app/src/components/flag/RoundFlag.tsx

@@ -0,0 +1,77 @@
+// 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 getCountryISO2 from 'country-iso-3-to-2';
+import React from 'react';
+import { View } from 'react-native';
+import * as CountryFlags from 'react-native-svg-circle-country-flags';
+
+import { slate300 } from '@/utils/colors';
+
+type CountryFlagComponent = React.ComponentType<{
+  width: number;
+  height: number;
+}>;
+
+type CountryFlagsRecord = Record<string, CountryFlagComponent>;
+
+interface RoundFlagProps {
+  countryCode: string;
+  size: number;
+}
+
+const findFlagComponent = (formattedCode: string) => {
+  const patterns = [
+    formattedCode,
+    formattedCode.toLowerCase(),
+    formattedCode.charAt(0).toUpperCase() +
+      formattedCode.charAt(1).toLowerCase(),
+  ];
+
+  for (const pattern of patterns) {
+    const component = (CountryFlags as unknown as CountryFlagsRecord)[pattern];
+    if (component) {
+      return component;
+    }
+  }
+  return null;
+};
+
+const getCountryFlag = (countryCode: string): CountryFlagComponent | null => {
+  try {
+    const normalizedCountryCode = countryCode === 'D<<' ? 'DEU' : countryCode;
+    const iso2 = getCountryISO2(normalizedCountryCode);
+    if (!iso2) {
+      return null;
+    }
+
+    const formattedCode = iso2.toUpperCase();
+    return findFlagComponent(formattedCode);
+  } catch (error) {
+    console.error('Error getting country flag:', error);
+    return null;
+  }
+};
+
+export const RoundFlag: React.FC<RoundFlagProps> = ({ countryCode, size }) => {
+  const CountryFlagComponent = getCountryFlag(countryCode);
+
+  if (!CountryFlagComponent) {
+    return (
+      <View
+        style={{
+          width: size,
+          height: size,
+          backgroundColor: slate300,
+        }}
+      />
+    );
+  }
+
+  return (
+    <View style={{ alignItems: 'center' }}>
+      <CountryFlagComponent width={size} height={size} />
+    </View>
+  );
+};

app/src/navigation/document.ts

@@ -4,13 +4,15 @@
 
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 
+import ComingSoonScreen from '@/screens/document/ComingSoonScreen';
+import CountryPickerScreen from '@/screens/document/CountryPickerScreen';
 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';
+import IDPickerScreen from '@/screens/document/IDPickerScreen';
 
 const documentScreens = {
   DocumentCamera: {
@@ -56,8 +58,8 @@ const documentScreens = {
       headerShown: false,
     } as NativeStackNavigationOptions,
   },
-  UnsupportedDocument: {
-    screen: UnsupportedDocumentScreen,
+  ComingSoon: {
+    screen: ComingSoonScreen,
     options: {
       headerShown: false,
     } as NativeStackNavigationOptions,
@@ -73,6 +75,22 @@ const documentScreens = {
       animation: 'slide_from_bottom',
     } as NativeStackNavigationOptions,
   },
+  CountryPicker: {
+    screen: CountryPickerScreen,
+    options: {
+      headerShown: false,
+    } as NativeStackNavigationOptions,
+  },
+  IDPicker: {
+    screen: IDPickerScreen,
+    options: {
+      headerShown: false,
+    } as NativeStackNavigationOptions,
+    initialParams: {
+      countryCode: '',
+      documentTypes: [],
+    },
+  },
 };
 
 export default documentScreens;

app/src/navigation/index.tsx

@@ -79,7 +79,7 @@ const NavigationWithTracking = () => {
     return () => {
       cleanup();
     };
-  }, []);
+  }, [selfClient]);
 
   return (
     <GestureHandlerRootView>

app/src/providers/selfClientProvider.tsx

@@ -136,10 +136,10 @@
       SdkEvents.PROVING_PASSPORT_NOT_SUPPORTED,
       ({ countryCode, documentCategory }) => {
         if (navigationRef.isReady()) {
-          navigationRef.navigate('UnsupportedDocument', {
+          navigationRef.navigate('ComingSoon', {
             countryCode,
             documentCategory,
           } as any);
         }
       },
     );

app/src/screens/dev/DevSettingsScreen.tsx

@@ -124,6 +124,7 @@ function ParameterSection({
 
 const items = [
   'DevSettings',
+  'CountryPicker',
   'AadhaarUpload',
   'DevFeatureFlags',
   'DevHapticFeedback',
@@ -149,7 +150,7 @@ const items = [
   'RecoverWithPhrase',
   'ShowRecoveryPhrase',
   'CloudBackupSettings',
-  'UnsupportedDocument',
+  'ComingSoon',
   'DocumentCameraTrouble',
   'DocumentNFCTrouble',
 ] satisfies (keyof RootStackParamList)[];