styling progress

package.json

@@ -31,6 +31,7 @@
     "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
+    "react-native-svg": "^15.9.0",
     "react-native-video": "^6.6.4"
   },
   "devDependencies": {
@@ -45,6 +46,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "husky": "^9.1.5",
     "prettier": "^3.3.3",
+    "react-native-svg-transformer": "^1.5.0",
     "typescript": "~5.3.3",
     "yarnhook": "^0.6.2"
   },

src/components/TabBarItem/TabBarItem.tsx

@@ -0,0 +1,46 @@
+import { Text, View } from 'react-native';
+
+// import { colors } from '@/styles/colors';
+
+interface TabBarItemProps {
+  icon: React.ReactNode;
+  label: string;
+  focused: boolean;
+}
+
+//Inline styling required --> can't make a styles.ts in this directory otherwise it'll make a new bottom tab idk why
+export default function TabBarItem({ icon, label, focused }: TabBarItemProps) {
+  return (
+    <View
+      style={{
+        // backgroundColor: focused ? colors.orange : 'transparent',
+        borderRadius: 10,
+        height: 55,
+        width: 66,
+        marginTop: 10,
+      }}
+    >
+      <View
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginTop: 8,
+        }}
+      >
+        {icon}
+        <Text
+          style={{
+            fontSize: 9,
+            fontStyle: 'normal',
+            fontWeight: '600',
+            lineHeight: 21,
+            // color: focused ? colors.orange : colors.grey,
+          }}
+        >
+          {label}
+        </Text>
+      </View>
+    </View>
+  );
+}

src/screens/Home/index.tsx

@@ -1,5 +1,25 @@
-import { Text } from 'react-native';
+import React from 'react';
+import { Button, Text, TouchableOpacity, View } from 'react-native';
+import { styles } from './styles';
 
 export default function HomeScreen() {
-  return <Text>HOME!!!</Text>;
+  return (
+    <View style={styles.container}>
+      <View style={styles.welcomeBox}>
+        <Text style={styles.welcomeText}>Welcome!</Text>
+        <Text style={styles.welcomeBlurb}>
+          Welcome to a place of support and healing. This app is here to provide
+          you with resources designed to help you reclaim your sense of safety
+          and strength. Whether you’re seeking information, connection, or
+          guidance, we’re here to offer tools that empower you on your journey.
+        </Text>
+        <Text style={styles.viewTutorialText}>
+          Ready to start? Click “View Tutorial” to learn how to use the app.
+        </Text>
+        <TouchableOpacity style={styles.Button}>
+          <Text style={styles.buttonText}>View Tutorial</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
 }