removing safeareacontext in leiu of header

adding tab bar to authenticated screen

components/Home/component.tsx

@@ -10,7 +10,6 @@ export default function Home(): React.JSX.Element {
     const { apiClient } = useApiClientContext();
 
     return (
-        <SafeAreaView>
             <ScrollView paddingLeft={10}>
                 <YStack alignContent='flex-start'>
                     <Heading>Hi there</Heading>
@@ -19,6 +18,5 @@ export default function Home(): React.JSX.Element {
                     </ScrollView>
                 </YStack>
             </ScrollView>
-        </SafeAreaView>
     );
 }

components/navigation.tsx

@@ -1,6 +1,6 @@
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import Home from "./Home/component";
 import Player from "./Player/component";
+import { Tabs } from "./tabs";
 
 export default function Navigation(): React.JSX.Element {
 
@@ -10,10 +10,10 @@ export default function Navigation(): React.JSX.Element {
       <RootStack.Navigator>
       <RootStack.Group>
         <RootStack.Screen 
-          name="Home" 
-          component={Home}
+          name="Tabs" 
+          component={Tabs}
           options={{
-            headerTitle: undefined
+            headerShown: false
           }}
         />
       </RootStack.Group>

components/tabs.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import Home from "./Home/component";
+
+const Tab = createBottomTabNavigator();
+
+export function Tabs() {
+    return (
+        <Tab.Navigator>
+            <Tab.Screen name="Home" component={Home} />
+        </Tab.Navigator>
+    )
+}