Use SvgXml for onboarding images

Author: dgca

packages/mobile-app/app.json

@@ -12,9 +12,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "bundleIdentifier": "com.ironfish.mobileapp",
       "infoPlist": {
@@ -45,23 +43,6 @@
       },
       "package": "com.ironfish.mobileapp"
     },
-    "plugins": [
-      "expo-router",
-      "expo-secure-store",
-      [
-        "expo-build-properties",
-        {
-          "android": {
-            "newArchEnabled": true
-          },
-          "ios": {
-            "newArchEnabled": true
-          }
-        }
-      ],
-      "./plugins/withPointerEvents.js",
-      "expo-font",
-      "expo-sqlite"
-    ]
+    "plugins": ["expo-router", "expo-secure-store", "expo-font", "expo-sqlite"]
   }
 }

packages/mobile-app/app/onboarding/create.tsx

@@ -1,8 +1,7 @@
 import { StyleSheet, View, Text } from "react-native";
 import { LinkButton } from "@/components/LinkButton";
-import SecureOctopus from "@/assets/images/secure-octopus.svg";
 import { useLocalSearchParams } from "expo-router";
-
+import { SecureOctopus } from "@/svgs/SecureOctopus";
 const styles = StyleSheet.create({
   container: {
     alignItems: "center",

packages/mobile-app/app/onboarding/index.tsx

@@ -3,8 +3,8 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { LinkButton } from "../../components/LinkButton";
 import { LinearGradient } from "expo-linear-gradient";
 
-import LogoWithText from "../../assets/images/logo-with-text.svg";
-import KeyPlantOrchid from "../../assets/images/key-plant--orchid.svg";
+import { KeyPlantOrchid } from "@/svgs/KeyPlantOrchid";
+import { LogoWithText } from "@/svgs/LogoWithText";
 
 const styles = StyleSheet.create({
   background: {
@@ -38,16 +38,17 @@ export default function Onboarding() {
             style={[StyleSheet.absoluteFillObject, styles.background]}
           />
           <View style={styles.verticalStack}>
-            <LogoWithText height={18} />
+            <LogoWithText />
             <Text style={styles.titleText}>Let's Make Web3 Private</Text>
           </View>
           <View
             style={{
               flex: 1,
               alignItems: "center",
+              justifyContent: "center",
             }}
           >
-            <KeyPlantOrchid style={{ aspectRatio: 0.5 }} />
+            <KeyPlantOrchid />
           </View>
           <View style={styles.buttonStack}>
             <LinkButton