safe area view

ArtisanConnect/app/(tabs)/index.jsx

@@ -7,8 +7,9 @@ import { SearchSection } from "@/components/SearchSection";
 import { FlatList } from 'react-native';
 import { useAuthStore } from "@/store/authStore";
 import { useRouter } from "expo-router";
-import { useEffect, useState } from "react";;
-
+import { useEffect, useState } from "react";
+// import { SafeAreaView } from "react-native-safe-area-context";
+import { SafeAreaView } from "react-native";
 
 export default function Home() {
 const token = useAuthStore((state) => state.token);
@@ -46,14 +47,16 @@ const token = useAuthStore((state) => state.token);
 
 
   return (
-    <View>
+  <SafeAreaView className="flex-1 m-2"> 
+  {/* <View>    */}
     <SearchSection/>
-     <ScrollView showsVerticalScrollIndicator={false} className='m-2'>
+     <ScrollView showsVerticalScrollIndicator={false} >
         <CategorySection title="Polecane kategorie" notices={notices} />
         <NoticeSection title="Najnowsze ogłoszenia" notices={latestNotices} ctaLink="/notices?sort=latest"/>
         <UserSection title="Popularni sprzedawcy" notices={notices} />
         <NoticeSection title="Proponowane ogłoszenia" notices={recomendedNotices} ctaLink="/notices"/>
      </ScrollView>
-     </View>
+     {/* </View> */}
+  </SafeAreaView>
   );
 }

ArtisanConnect/app/_layout.jsx

@@ -2,21 +2,13 @@ import { Stack, Redirect } from "expo-router";
 import "@/global.css";
 import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-// import { useEffect, useState } from "react";
-// import { useNoticesStore } from "@/store/noticesStore"; 
 
 const queryClient = new QueryClient();
 export default function RootLayout() {
-  //  const fetchNotices = useNoticesStore((state) => state.fetchNotices);
-
-  // useEffect(() => {
-  //   fetchNotices();
-  // }, []);
   
 return (
     <QueryClientProvider client={queryClient}>
       <GluestackUIProvider>
-        
         <Stack
           screenOptions={{
             headerTintColor: "#1c1c1e",

ArtisanConnect/components/SearchSection.jsx

@@ -2,6 +2,7 @@ import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input"
 import { SearchIcon } from "@/components/ui/icon"
 import { Box } from "@/components/ui/box"
 import { useRouter } from "expo-router";
+import { View } from "react-native";
 
 export function SearchSection({ searchQuery, setSearchQuery }) {
     const router = useRouter();
@@ -14,18 +15,17 @@ export function SearchSection({ searchQuery, setSearchQuery }) {
     });
   };
   return (
-    <Box className="m-2 bg-white">
-      <Input>
+    <Box className="mb-2 bg-white p-2 rounded-md">
+      <Input className="p-2">
         <InputSlot>
           <InputIcon as={SearchIcon} />
         </InputSlot>
-        <InputField placeholder="Wyszukaj.."
+        <InputField placeholder="Wyszukaj..."
           value={searchQuery}
           onChangeText={setSearchQuery}
           onSubmitEditing={handleSubmit}
           returnKeyType="search" />
       </Input>
     </Box>
-
   )
 }