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/package.json

@@ -145,7 +145,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}
             {': '}