Dashboard UI conversion from figma

app.json

@@ -15,7 +15,10 @@
     },
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.strangee.sync"
+      "bundleIdentifier": "com.strangee.sync",
+      "config": {
+        "usesNonExemptEncryption": false
+      }
     },
     "android": {
       "adaptiveIcon": {
@@ -30,7 +33,16 @@
       "favicon": "./assets/images/sync.png"
     },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      [
+        "expo-secure-store",
+        {
+          "configureAndroidBackup": true,
+          "faceIDPermission": "Allow $(PRODUCT_NAME) to access your Face ID biometric data."
+        }
+      ],
+      "expo-font",
+      "expo-web-browser"
     ],
     "experiments": {
       "typedRoutes": true

app/(screens)/_layout.tsx

@@ -0,0 +1,14 @@
+import { SplashScreen, Stack } from "expo-router";
+import { View } from 'react-native';
+
+SplashScreen.preventAutoHideAsync();
+
+export default function ScreenLayout() {
+
+    return (
+        <Stack>
+            <Stack.Screen name="signin" options={{ headerShown: false }} />
+            <Stack.Screen name="signup" options={{ headerShown: false }} />
+        </Stack>
+    );
+}

app/(screens)/signin.tsx

@@ -0,0 +1,10 @@
+import { SignIn } from '@/components/SignIn';
+import React from 'react';
+
+const SignInScreen = () => {
+  return (
+    <SignIn />
+  );
+}
+
+export default SignInScreen;

app/(screens)/signup.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {SignUp} from '@/components/SignUp';
+
+const SignUpScreen = () => {
+    return (
+        <SignUp />
+    )
+}
+
+export default SignUpScreen;

app/(tabs)/_layout.tsx

@@ -0,0 +1,60 @@
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { Tabs } from 'expo-router';
+import HomeIcon from '../../assets/icons/home.svg'
+import CardIcon from '../../assets/icons/card.svg'
+import SwitchIcon from '../../assets/icons/Horizontal_switch_light.svg'
+import UserIcon from '../../assets/icons/User_light.svg'
+
+export default function TabLayout() {
+    return (
+        <Tabs screenOptions={{
+            tabBarActiveBackgroundColor: '#1A1A41',
+            tabBarActiveTintColor: 'white',
+            tabBarInactiveTintColor: 'gray',
+            tabBarStyle: {
+                backgroundColor: '#0E1032',
+                height: 84,
+                borderTopWidth: 0.2,
+                borderTopColor: '#1f2937',
+            },
+            tabBarItemStyle: {
+                margin: 10,
+                borderRadius: 15,
+                padding: 5,
+            },
+        }}>
+            <Tabs.Screen
+                name="index"
+                options={{
+                    title: 'Home',
+                    tabBarIcon: () => <HomeIcon width={24} height={24} />,
+                    headerShown: false,
+                }}
+            />
+            <Tabs.Screen
+                name="card"
+                options={{
+                    title: 'Card',
+                    tabBarIcon: () => <CardIcon width={24} height={24} />,
+                    headerShown: false,
+                }}
+            />
+            <Tabs.Screen
+                name="transfers"
+                options={{
+                    title: 'Transfers',
+                    tabBarIcon: () => <SwitchIcon width={24} height={24} />,
+                    headerShown: false,
+                }}
+            />
+            <Tabs.Screen
+                name="account"
+                options={{
+                    title: 'Account',
+                    tabBarIcon: () => <UserIcon width={24} height={24} />,
+                    headerShown: false,
+                }}
+            />
+        </Tabs>
+    );
+}

app/(tabs)/account.tsx

@@ -0,0 +1,17 @@
+import { SafeAreaView } from "react-native-safe-area-context";
+import { ScrollView } from "react-native";
+import { View, Text } from "react-native";
+
+const AccountScreen = () => {
+    return (
+        <SafeAreaView className="flex-1 bg-[#0E1032]">
+            <ScrollView contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }} showsVerticalScrollIndicator={false}>
+                <View className="flex-1 items-center justify-center text-white">
+                    <Text className="text-2xl font-bold  text-white">Account Screen</Text>
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default AccountScreen;

app/(tabs)/card.tsx

@@ -0,0 +1,17 @@
+import { View, Text } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { ScrollView } from "react-native";
+
+const CardScreen = () => {
+    return (
+        <SafeAreaView className="flex-1 bg-[#0E1032]">
+            <ScrollView contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }} showsVerticalScrollIndicator={false}>
+                <View className="flex-1 items-center justify-center text-white">
+                    <Text className="text-2xl font-bold  text-white">Card Screen</Text>
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default CardScreen;

app/(tabs)/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { SafeAreaView, ScrollView, View, Text } from 'react-native';
+
+import { UserHeader } from '../../components/home/UserHeader';
+import { BalanceCard } from '../../components/home/BalanceCard';
+import { ActionButton } from '../../components/home/ActionButton';
+import { ExchangeRateCard } from '../../components/home/ExchangeRateCard';
+import { TransactionItem } from '../../components/home/TransactionItem';
+import TXIcon from '../../assets/icons/txicon.svg';
+import PlusIcon from '../../assets/icons/plus.svg';
+import SwapIcon from '../../assets/icons/Horizontal_switch_light.svg';
+import ReceiveIcon from '../../assets/icons/In_light.svg';
+import ProfileIcon from '../../assets/images/profile_image.png';
+
+const HomeScreen = () => {
+  const transactions = [
+    {
+      id: '#2934359w9432',
+      name: 'StarkNat',
+      amount: '$1,500.00',
+      date: '20.04.2025',
+      positive: false,
+    },
+    {
+      id: '#2934359w9432',
+      name: 'StarkNat',
+      amount: '$12,942.30',
+      date: '17.04.2025',
+      positive: true,
+    },
+  ];
+
+  return (
+    <SafeAreaView className="flex-1 bg-[#0E1032]">
+      <ScrollView contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }} showsVerticalScrollIndicator={false}>
+        <UserHeader
+          name="Elijah Okumar"
+          email="Hello@elijah.com"
+          avatarUrl={ProfileIcon}
+        />
+
+        {/* Balance Cards */}
+        <View className="flex-row justify-between mt-2">
+          <BalanceCard label="USD Balance" balance="$36,872.94" percentageChange="72% (24d)" iconName="dollar" />
+          <BalanceCard label="ETH Balance" balance="$36,872.94" percentageChange="72% (24d)" iconName="bitcoin" />
+        </View>
+
+        {/* Quick Action Buttons */}
+        <View className="flex-row justify-between my-4">
+          <ActionButton icon={PlusIcon} label="Add" />
+          <ActionButton icon={SwapIcon} label="Swap" />
+          <ActionButton icon={ReceiveIcon} label="Receive" />
+        </View>
+
+        {/* Exchange Rate */}
+        <ExchangeRateCard />
+
+        {/* Transaction History Header */}
+        <View className="flex-row items-center justify-between mb-2">
+          <Text className="text-white font-semibold">Transaction History</Text>
+          <TXIcon width={32} height={32} fill="#FFFFFF" />
+        </View>
+
+        {/* Transaction Items */}
+        {transactions.map((t, idx) => (
+          <TransactionItem
+            key={idx}
+            id={t.id}
+            name={t.name}
+            amount={t.amount}
+            date={t.date}
+            positive={t.positive}
+          />
+        ))}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+export default HomeScreen;

app/(tabs)/transfers.tsx

@@ -0,0 +1,17 @@
+import { View, Text } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { ScrollView } from "react-native";
+
+const TransfersScreen = () => {
+    return (
+        <SafeAreaView className="flex-1 bg-[#0E1032]">
+            <ScrollView contentContainerStyle={{ paddingHorizontal: 20, paddingBottom: 20 }} showsVerticalScrollIndicator={false}>
+                <View className="flex-1 items-center justify-center text-white">
+                    <Text className="text-2xl font-bold  text-white">Transfer Screen</Text>
+                </View>
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+export default TransfersScreen;