refresh of the page with notices

ArtisanConnect/app/(tabs)/notices.jsx

@@ -1,10 +1,12 @@
-import { FlatList, Text, ActivityIndicator } from "react-native";
+import { FlatList, Text, ActivityIndicator, RefreshControl } from "react-native";
+import { useState } from "react";
 import { listNotices } from "@/api/notices";
 import { useQuery } from "@tanstack/react-query";
 import { NoticeCard } from "@/components/NoticeCard";
 
 export default function Notices() {
-  const { data, isLoading, error } = useQuery({
+  const [refreshing, setRefreshing] = useState(false);
+  const { data, isLoading, error, refetch } = useQuery({
     queryKey: ["notices"],
     queryFn: listNotices,
   });
@@ -18,6 +20,12 @@ export default function Notices() {
     return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
   }
 
+  const onRefresh = async () => {
+    setRefreshing(true);
+    await refetch();
+    setRefreshing(false);
+  };
+
   return (
     <FlatList
       key={2}
@@ -26,6 +34,14 @@ export default function Notices() {
       columnContainerClassName="m-2"
       columnWrapperClassName="gap-2 m-2"
       renderItem={({ item }) => <NoticeCard notice={item} />}
+      refreshControl={
+        <RefreshControl
+            refreshing={refreshing || isLoading}
+            onRefresh={onRefresh}
+            colors={["#3b82f6"]}
+            tintColor="#3b82f6"
+        />
+      }
     />
   );
 }