Move components to sdk for future use

app/index.js

@@ -13,20 +13,18 @@ import 'react-native-get-random-values';
 import { Buffer } from 'buffer';
 import React from 'react';
 import { AppRegistry, LogBox } from 'react-native';
-import { createTamagui, TamaguiProvider } from 'tamagui';
+import { TamaguiProvider } from 'tamagui';
 
 import App from './App';
 import { name as appName } from './app.json';
+import tamaguiConfig from './tamagui.config';
 
 import './src/utils/ethers';
 import 'react-native-gesture-handler';
-import { config } from '@tamagui/config/v2-native';
 
 // Set global Buffer before any other imports
 global.Buffer = Buffer;
 
-const tamaguiConfig = createTamagui(config);
-
 LogBox.ignoreLogs([
   /bad setState/,
   'Warning, duplicate ID for input',

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|@sentry|@anon-aadhaar)/)',
+    '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|@anon-aadhaar|react-native-svg|react-native-svg-circle-country-flags)/)',
   ],
   setupFiles: ['<rootDir>/jest.setup.js'],
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$',
@@ -17,8 +17,12 @@ module.exports = {
     '^@$': '<rootDir>/src',
     '^@tests/(.*)$': '<rootDir>/tests/src/$1',
     '^@tests$': '<rootDir>/tests/src',
+    // Map react-native-svg to app's node_modules for all packages
+    '^react-native-svg$': '<rootDir>/node_modules/react-native-svg',
     '^@selfxyz/mobile-sdk-alpha$':
       '<rootDir>/../packages/mobile-sdk-alpha/dist/cjs/index.cjs',
+    '^@selfxyz/mobile-sdk-alpha/components$':
+      '<rootDir>/../packages/mobile-sdk-alpha/dist/cjs/components/index.cjs',
     '^@selfxyz/mobile-sdk-alpha/onboarding/(.*)$':
       '<rootDir>/../packages/mobile-sdk-alpha/dist/cjs/flows/onboarding/$1.cjs',
     '^@selfxyz/mobile-sdk-alpha/disclosing/(.*)$':

app/jest.setup.js

@@ -682,6 +682,50 @@ jest.mock('./src/utils/notifications/notificationService', () =>
   require('./tests/__setup__/notificationServiceMock.js'),
 );
 
+// Mock react-native-svg
+jest.mock('react-native-svg', () => {
+  const React = require('react');
+
+  // Mock SvgXml component that handles XML strings
+  const SvgXml = React.forwardRef(
+    ({ 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';
+
+  return {
+    __esModule: true,
+    default: SvgXml,
+    SvgXml,
+    Svg: props => React.createElement('Svg', props, props.children),
+    Circle: props => React.createElement('Circle', props, props.children),
+    Path: props => React.createElement('Path', props, props.children),
+    G: props => React.createElement('G', props, props.children),
+    Rect: props => React.createElement('Rect', props, props.children),
+    Defs: props => React.createElement('Defs', props, props.children),
+    LinearGradient: props =>
+      React.createElement('LinearGradient', props, props.children),
+    Stop: props => React.createElement('Stop', props, props.children),
+    ClipPath: props => React.createElement('ClipPath', props, props.children),
+    Polygon: props => React.createElement('Polygon', props, props.children),
+    Polyline: props => React.createElement('Polyline', props, props.children),
+    Line: props => React.createElement('Line', props, props.children),
+    Text: props => React.createElement('Text', props, props.children),
+    TSpan: props => React.createElement('TSpan', props, props.children),
+  };
+});
+
 // Mock React Navigation
 jest.mock('@react-navigation/native', () => {
   const actualNav = jest.requireActual('@react-navigation/native');

app/package.json

@@ -143,7 +143,6 @@
     "react-native-screens": "4.15.3",
     "react-native-sqlite-storage": "^6.0.1",
     "react-native-svg": "15.12.1",
-    "react-native-svg-circle-country-flags": "^0.2.2",
     "react-native-svg-web": "^1.0.9",
     "react-native-web": "^0.19.0",
     "react-qr-barcode-scanner": "^2.1.8",

app/src/components/Disclosures.tsx

@@ -8,8 +8,8 @@ import { XStack, YStack } from 'tamagui';
 import type { Country3LetterCode } from '@selfxyz/common/constants';
 import { countryCodes } from '@selfxyz/common/constants';
 import type { SelfAppDisclosureConfig } from '@selfxyz/common/utils';
+import { BodyText } from '@selfxyz/mobile-sdk-alpha/components';
 
-import { BodyText } from '@/components/typography/BodyText';
 import CheckMark from '@/images/icons/checkmark.svg';
 import { slate200, slate500 } from '@/utils/colors';
 
@@ -115,7 +115,7 @@ const DisclosureItem: React.FC<DisclosureItemProps> = ({
       paddingHorizontal={10}
     >
       <CheckMark width={22} />
-      <BodyText textBreakStrategy="balanced" color={slate500}>
+      <BodyText textBreakStrategy="balanced" style={{ color: slate500 }}>
         {text}
       </BodyText>
     </XStack>

app/src/components/FeedbackModal.tsx

@@ -6,7 +6,8 @@ import React, { useState } from 'react';
 import { Alert, Modal, StyleSheet, Text, TextInput, View } from 'react-native';
 import { Button, XStack, YStack } from 'tamagui';
 
-import { Caption } from '@/components/typography/Caption';
+import { Caption } from '@selfxyz/mobile-sdk-alpha/components';
+
 import { black, slate400, white, zinc800, zinc900 } from '@/utils/colors';
 import { advercase, dinot } from '@/utils/fonts';
 

app/src/components/FeedbackModalScreen.tsx

@@ -6,10 +6,13 @@ import React, { useCallback } from 'react';
 import { Modal, StyleSheet } from 'react-native';
 import { styled, View, XStack, YStack } from 'tamagui';
 
-import { PrimaryButton } from '@/components/buttons/PrimaryButton';
-import { SecondaryButton } from '@/components/buttons/SecondaryButton';
-import Description from '@/components/typography/Description';
-import { Title } from '@/components/typography/Title';
+import {
+  Description,
+  PrimaryButton,
+  SecondaryButton,
+  Title,
+} from '@selfxyz/mobile-sdk-alpha/components';
+
 import ModalClose from '@/images/icons/modal_close.svg';
 import LogoInversed from '@/images/logo_inversed.svg';
 import { white } from '@/utils/colors';
@@ -112,7 +115,9 @@ const FeedbackModalScreen: React.FC<FeedbackModalScreenProps> = ({
               )}
             </XStack>
             <YStack gap={20}>
-              <Title textAlign="left">{modalParams.titleText}</Title>
+              <Title style={{ textAlign: 'left' }}>
+                {modalParams.titleText}
+              </Title>
               <Description style={styles.description}>
                 {modalParams.bodyText}
               </Description>

app/src/components/NavBar/AadhaarNavBar.tsx

@@ -61,10 +61,12 @@ export const AadhaarNavBar = (props: NativeStackHeaderProps) => {
         />
 
         <NavBar.Title
-          fontSize={16}
-          color={black}
-          fontWeight="600"
-          fontFamily={dinot}
+          style={{
+            fontSize: 16,
+            color: black,
+            fontWeight: '600',
+            fontFamily: dinot,
+          }}
         >
           AADHAAR REGISTRATION
         </NavBar.Title>

app/src/components/NavBar/BaseNavBar.tsx

@@ -3,13 +3,14 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import React, { useMemo } from 'react';
+import type { TextProps } from 'react-native';
 import type { SystemBarStyle } from 'react-native-edge-to-edge';
 import { SystemBars } from 'react-native-edge-to-edge';
-import type { TextProps, ViewProps, XStackProps } from 'tamagui';
+import type { ViewProps, XStackProps } from 'tamagui';
 import { Button, View, XStack } from 'tamagui';
 import { ChevronLeft, X } from '@tamagui/lucide-icons';
 
-import { Title } from '@/components/typography/Title';
+import { Title } from '@selfxyz/mobile-sdk-alpha/components';
 
 interface NavBarProps extends XStackProps {
   children: React.ReactNode;

app/src/components/NavBar/DocumentFlowNavBar.tsx

@@ -32,7 +32,7 @@ export const DocumentFlowNavBar = ({
       justifyContent="space-between"
     >
       <NavBar.LeftAction component="back" onPress={() => navigation.goBack()} />
-      <NavBar.Title fontFamily={titleFontFamily} fontSize={fontSize}>
+      <NavBar.Title style={{ fontFamily: titleFontFamily, fontSize: fontSize }}>
         {title}
       </NavBar.Title>
       <NavBar.RightAction

app/src/components/NavBar/HomeNavBar.tsx

@@ -100,7 +100,7 @@ export const HomeNavBar = (props: NativeStackHeaderProps) => {
           </XStack>
         }
       />
-      <NavBar.Title size="large" color={black}>
+      <NavBar.Title style={{ fontSize: 24, color: black }}>
         {props.options.title}
       </NavBar.Title>
       <NavBar.RightAction

app/src/components/NavBar/IdDetailsNavBar.tsx

@@ -41,7 +41,7 @@ export const IdDetailsNavBar = (props: NativeStackHeaderProps) => {
           </Button>
         }
       />
-      <NavBar.Title size="large" color={black}>
+      <NavBar.Title style={{ fontSize: 24, color: black }}>
         {props.options.title}
       </NavBar.Title>
       <NavBar.RightAction

app/src/components/Tips.tsx

@@ -5,7 +5,8 @@
 import React from 'react';
 import { Text, View } from 'tamagui';
 
-import { Caption } from '@/components/typography/Caption';
+import { Caption } from '@selfxyz/mobile-sdk-alpha/components';
+
 import { slate500 } from '@/utils/colors';
 
 export interface TipProps {
@@ -39,7 +40,7 @@ function Tip({ title, body, icon }: TipProps) {
         </View>
       )}
       <View flex={1}>
-        <Caption size="large" color={slate500}>
+        <Caption size="large" style={{ color: slate500 }}>
           <Text fontWeight={'bold'}>
             {title}
             {': '}

app/src/components/homeScreen/idCard.tsx

@@ -142,7 +142,7 @@ const IdCardLayout: FC<IdCardLayoutAttributes> = ({
               </Text>
               <Text
                 fontSize={fontSize.small}
-                color={'#9193A2'}
+                color={slate400}
                 fontFamily={dinot}
               >
                 Verified{' '}