Move Layout Components to SDK (#1280)

* create replacement tamagui components and move nav bars. (keep home where it is since we are not moving the home screen)

* lint

* clean up

* fix type

* prety

* god bless

* use proper conversions

* lint

* add missing styles and a way to debug if more are missing

* fix bad instance error

app/src/components/NavBar/AadhaarNavBar.tsx

@@ -4,10 +4,11 @@
 
 import React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Button, XStack, YStack } from 'tamagui';
 import type { NativeStackHeaderProps } from '@react-navigation/native-stack';
 import { ChevronLeft, HelpCircle } from '@tamagui/lucide-icons';
 
+import { Button, XStack, YStack } from '@selfxyz/mobile-sdk-alpha/components';
+
 import { NavBar } from '@/components/NavBar/BaseNavBar';
 import { black, slate100, slate300 } from '@/utils/colors';
 import { extraYPadding } from '@/utils/constants';

app/src/components/NavBar/BaseNavBar.tsx

@@ -6,13 +6,17 @@ 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 { ViewProps, XStackProps } from 'tamagui';
-import { Button, View, XStack } from 'tamagui';
 import { ChevronLeft, X } from '@tamagui/lucide-icons';
 
-import { Title } from '@selfxyz/mobile-sdk-alpha/components';
+import type { ViewProps } from '@selfxyz/mobile-sdk-alpha/components';
+import {
+  Button,
+  Title,
+  View,
+  XStack,
+} from '@selfxyz/mobile-sdk-alpha/components';
 
-interface NavBarProps extends XStackProps {
+interface NavBarProps extends ViewProps {
   children: React.ReactNode;
   backgroundColor?: string;
   barStyle?: SystemBarStyle;
@@ -96,6 +100,10 @@ const Container: React.FC<NavBarProps> = ({
   children,
   backgroundColor,
   barStyle,
+  justifyContent = 'flex-start',
+  alignItems = 'center',
+  flexShrink = 0,
+  flexDirection = 'row',
   ...props
 }) => {
   return (
@@ -103,8 +111,10 @@ const Container: React.FC<NavBarProps> = ({
       <SystemBars style={barStyle} />
       <XStack
         backgroundColor={backgroundColor}
-        justifyContent="flex-start"
-        alignItems="center"
+        justifyContent={justifyContent}
+        alignItems={alignItems}
+        flexShrink={flexShrink}
+        flexDirection={flexDirection}
         {...props}
       >
         {children}

app/src/components/NavBar/DefaultNavBar.tsx

@@ -3,8 +3,8 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import React from 'react';
+import type { TextStyle, ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { TextStyle, ViewStyle } from 'tamagui';
 import type { NativeStackHeaderProps } from '@react-navigation/native-stack';
 
 import { NavBar } from '@/components/NavBar/BaseNavBar';

app/src/components/NavBar/IdDetailsNavBar.tsx

@@ -4,9 +4,10 @@
 
 import React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Button, Text, View } from 'tamagui';
 import type { NativeStackHeaderProps } from '@react-navigation/native-stack';
 
+import { Button, Text, View } from '@selfxyz/mobile-sdk-alpha/components';
+
 import { NavBar } from '@/components/NavBar/BaseNavBar';
 import { black, charcoal, slate50 } from '@/utils/colors';
 import { extraYPadding } from '@/utils/constants';
@@ -29,7 +30,7 @@ export const IdDetailsNavBar = (props: NativeStackHeaderProps) => {
             unstyled
             marginLeft={'$3.5'}
             padding={'$3'}
-            width={'$10'}
+            width={104}
             onPress={() => {
               buttonTap();
               props.navigation.goBack();