keyboard avoidiing fix

ArtisanConnect/app/(tabs)/notices.jsx

@@ -1,6 +1,6 @@
 import { FlatList, Text, ActivityIndicator, RefreshControl, Dimensions } from "react-native";
 import { useState, useEffect } from "react";
-import { Ionicons } from "@expo/vector-icons";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useNoticesStore } from "@/store/noticesStore";
 import { NoticeCard } from "@/components/NoticeCard";
 import { useLocalSearchParams, useRouter } from "expo-router";
@@ -11,9 +11,13 @@ import { listCategories } from "@/api/categories";
 import { FormControl, FormControlLabel } from "@/components/ui/form-control";
 import { Input, InputField } from "@/components/ui/input";
 import { HStack } from "@/components/ui/hstack";
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { KeyboardAvoidingView, Platform } from "react-native";
 import {
     Actionsheet,
     ActionsheetContent,
+    ActionsheetItem,
+    ActionsheetItemText,
     ActionsheetDragIndicator,
     ActionsheetDragIndicatorWrapper,
     ActionsheetBackdrop,
@@ -30,6 +34,7 @@ import {
     SelectDragIndicatorWrapper,
     SelectItem,
 } from "@/components/ui/select";
+import { ScrollView } from "react-native-gesture-handler";
 
 export default function Notices() {
     // Hooks
@@ -38,6 +43,7 @@ export default function Notices() {
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
     const [showActionsheet, setShowActionsheet] = useState(false);
+    const [showSortSheet, setShowSortSheet] = useState(false);
     const [categories, setCategories] = useState([]);
     const [filteredNotices, setFilteredNotices] = useState([]);
     const params = useLocalSearchParams();
@@ -72,13 +78,32 @@ export default function Notices() {
             result = result.filter(notice => notice.category === params.category);
         }
 
-        if (params.sort === "latest") {
+        if (params.sort) {
-            result = [...result].sort(
+            if( params.sort == "latest"){
-                (a, b) => new Date(b.publishDate) - new Date(a.publishDate)
+                result = [...result].sort(
-            );
+                    (a, b) => new Date(b.publishDate) - new Date(a.publishDate)
+                );
+            }else if (params.sort == "oldest") {
+                result = [...result].sort(
+                    (a, b) => new Date(a.publishDate) - new Date(b.publishDate)
+                );
+            }else if (params.sort == "cheapest") {
+                result = [...result].sort((a, b) => {
+                    const priceA = parseFloat(a.price);
+                    const priceB = parseFloat(b.price);
+                    return isNaN(priceA) || isNaN(priceB) ? 0 : priceA - priceB;
+                });
+            }else if (params.sort == "expensive") {
+                result = [...result].sort((a, b) => {
+                    const priceA = parseFloat(a.price);
+                    const priceB = parseFloat(b.price);
+                    return isNaN(priceA) || isNaN(priceB) ? 0 : priceB - priceA;
+                });
+            }
+
         }
 
-        if(params.priceFrom) {
+        if (params.priceFrom) {
             result = result.filter(notice => {
                 const price = parseFloat(notice.price);
                 const priceFrom = parseFloat(params.priceFrom);
@@ -94,16 +119,21 @@ export default function Notices() {
             });
         }
 
-        
+
         if (params.search) {
             const searchTerm = params.search.toLowerCase();
-            result = result.filter(notice =>{
+            result = result.filter(notice => {
-                 return notice.title.toLowerCase().includes(searchTerm);
+                return notice.title.toLowerCase().includes(searchTerm);
             });
         }
 
         setFilteredNotices(result);
-    }, );
+    }, [notices,
+    params.category,
+    params.sort,
+    params.priceFrom,
+    params.priceTo,
+    params.search]);
 
 
     let filterActive = !!params.category || !!params.sort || !!params.priceFrom || !!params.priceTo || !!params.search;
@@ -129,7 +159,7 @@ export default function Notices() {
     };
 
     const handlePriceFrom = (value) => {
-         router.replace({
+        router.replace({
             pathname: "/notices",
             params: { ...params, priceFrom: value }
         });
@@ -144,6 +174,14 @@ export default function Notices() {
 
     const handleClose = () => setShowActionsheet(false);
 
+    const handleSort = (value) => {
+        router.replace({
+            pathname: "/notices",
+            params: { ...params, sort: value }
+        });
+        setShowSortSheet(false);
+    }
+
     const onRefresh = async () => {
         setRefreshing(true);
         try {
@@ -172,10 +210,15 @@ export default function Notices() {
     return (
         <>
             <Box style={{ flexDirection: "row", padding: 8, paddingTop: 16, paddingBottom: 16, backgroundColor: "white", alignItems: "center", justifyContent: "space-between" }}>
-                <Button variant="outline" onPress={() => setShowActionsheet(true)}>
+                <Box style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                    <ButtonText>Filtry</ButtonText>
+                    <Button variant="outline" onPress={() => setShowActionsheet(true)}>
-                    <Ionicons name="filter-outline" size={20} color="black" />
+                        <ButtonText>Filtruj</ButtonText>
-                </Button>
+                        <Ionicons name="filter-outline" size={20} color="black" />
+                    </Button>
+                    <Button variant="outline" onPress={() => setShowSortSheet(true)}>
+                        <Ionicons name="chevron-expand-outline" size={20} color="black" />
+                    </Button>
+                </Box>
                 {filterActive && (
                     <Button variant="link" onPress={() => router.replace("/notices")}>
                         <ButtonText>Wyczyść</ButtonText>
@@ -184,12 +227,17 @@ export default function Notices() {
             </Box>
             <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
                 <ActionsheetBackdrop />
-                <ActionsheetContent>
+                <ActionsheetContent  style={{ maxHeight: SCREEN_HEIGHT * 0.6, width: '100%' }} >
+    <KeyboardAwareScrollView
+      contentContainerStyle={{ flexGrow: 1, width: '100%' }}
+      enableOnAndroid={true}
+      extraScrollHeight={40}
+      >
                     <ActionsheetDragIndicatorWrapper>
                         <ActionsheetDragIndicator />
                     </ActionsheetDragIndicatorWrapper>
-                    <Box className="mb-4">
+                    <Box className="mb-4" style={{ width: "100%" }}>
-                        <HStack space="md" style={{ width: "100%"}}>
+                        <HStack space="md" style={{ width: "100%" }}>
                             <FormControl
                                 style={{ flex: 1 }}>
                                 <Input>
@@ -207,16 +255,16 @@ export default function Notices() {
                                     <InputField
                                         keyboardType="numeric"
                                         placeholder="Do:"
-                                        value={params.priceTo || ''} 
+                                        value={params.priceTo || ''}
                                         onChangeText={handlePriceTo}
                                     />
                                 </Input>
                             </FormControl>
                         </HStack>
                     </Box>
-                    <Box className="mb-4 w-full">
+                    <Box className="mb-4 w-full" style={{ flex: 1 }}>
                         <Select
-                            style={{ width: '100%' }}
+                            style={{ width: '100%',  flex: 1  }}
                             selectedValue={params.category || ''}
                             onValueChange={handleCategorySelect}
                         >
@@ -250,7 +298,40 @@ export default function Notices() {
                             </SelectPortal>
                         </Select>
                     </Box>
-
+</KeyboardAwareScrollView>
+                </ActionsheetContent>
+            </Actionsheet>
+            <Actionsheet isOpen={showSortSheet} onClose={() => setShowSortSheet(false)}>
+                <ActionsheetBackdrop />
+                <ActionsheetContent>
+                    <ActionsheetDragIndicatorWrapper>
+                        <ActionsheetDragIndicator />
+                    </ActionsheetDragIndicatorWrapper>
+                    <ActionsheetItem 
+                    className={ !params.sort ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort()}>
+                        <ActionsheetItemText>Trafność</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem 
+                     className={ params.sort == 'latest' ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort('latest')}>
+                        <ActionsheetItemText>Najnowsze</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem 
+                     className={ params.sort == 'oldest' ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort('oldest')}>
+                        <ActionsheetItemText>Najstarsze</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem 
+                     className={ params.sort == 'cheapest' ? 'bg-gray-200' : ''}
+                     onPress={() => handleSort('cheapest')}>
+                        <ActionsheetItemText>Najtańsze</ActionsheetItemText>
+                    </ActionsheetItem>
+                    <ActionsheetItem
+                     className={ params.sort == 'expensive' ? 'bg-gray-200' : ''}
+                    onPress={() => handleSort('expensive')}>
+                        <ActionsheetItemText>Najdroższe</ActionsheetItemText>
+                    </ActionsheetItem>
                 </ActionsheetContent>
             </Actionsheet>
             <FlatList

ArtisanConnect/package-lock.json

@@ -47,6 +47,7 @@
         "react-native": "0.79.2",
         "react-native-css-interop": "^0.1.22",
         "react-native-gesture-handler": "~2.24.0",
+        "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-reanimated": "~3.17.4",
         "react-native-safe-area-context": "5.4.0",
         "react-native-screens": "~4.10.0",
@@ -8861,6 +8862,23 @@
         "node": ">= 6"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "license": "MIT"
@@ -9131,6 +9149,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-iphone-x-helper": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-native": ">=0.42.0"
+      }
+    },
     "node_modules/react-native-is-edge-to-edge": {
       "version": "1.1.7",
       "license": "MIT",
@@ -9139,6 +9166,19 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-keyboard-aware-scroll-view": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.5.tgz",
+      "integrity": "sha512-XwfRn+T/qBH9WjTWIBiJD2hPWg0yJvtaEw6RtPCa5/PYHabzBaWxYBOl0usXN/368BL1XktnZPh8C2lmTpOREA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.6.2",
+        "react-native-iphone-x-helper": "^1.0.3"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.48.4"
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "3.17.5",
       "license": "MIT",

ArtisanConnect/package.json

@@ -48,6 +48,7 @@
     "react-native": "0.79.2",
     "react-native-css-interop": "^0.1.22",
     "react-native-gesture-handler": "~2.24.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.10.0",