refactor: remove ScrollView and non-Tailwind styling

client/components/TaskType/CloseButton.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { useNavigation } from '@react-navigation/native';
+import { IconButton } from 'react-native-paper';
+
+import Close1 from '../../assets/close/close1.svg';
+import Close2 from '../../assets/close/close2.svg';
+import { AppStackNavigation } from '../../navigation/AppNavigation';
+
+export function CloseButton({onPress}: {onPress: () => void}) {
+const navigation = useNavigation<AppStackNavigation>();
+
+return (
+    <IconButton
+        className="align-center m-2 flex h-[50px] w-[52px] justify-center rounded-xl bg-carewallet-gray"
+        mode="contained"
+        icon={() => (
+            <>
+                <Close1 style={{ position: 'absolute', top: 20, left: 20 }} />
+                <Close2 style={{ position: 'absolute', top: 20, left: 20 }} />
+            </>
+        )}
+        onPress={onPress}
+    />
+);
+}

client/package.json

@@ -24,7 +24,7 @@
     "@types/react": "^18.2.55",
     "axios": "^1.6.4",
     "clsx": "^2.1.0",
-    "expo": "^50.0.7",
+    "expo": "^50.0.11",
     "expo-document-picker": "~11.10.1",
     "expo-file-system": "~16.0.6",
     "expo-status-bar": "~1.11.1",

client/screens/TaskType.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState
 } from 'react';
-import { ScrollView, View } from 'react-native';
+import { FlatList, View } from 'react-native';
 
 import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
@@ -18,6 +18,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { BackButton } from '../components/TaskType/BackButton';
 import { AppStackNavigation } from '../navigation/AppNavigation';
 import { Category, categoryToTypeMap, TypeOfTask } from '../types/type';
+import { CloseButton } from '../components/TaskType/CloseButton';
 
 export function TaskType() {
   const navigation = useNavigation<AppStackNavigation>();
@@ -43,10 +44,16 @@ export function TaskType() {
     value: filter
   }));
 
-  const snapPoints = useMemo(() => ['50%'], []);
+  const snapPoints = useMemo(() => ['60%'], []);
 
   const bottomSheetRef = useRef<BottomSheet>(null);
 
+  const closeBottomSheet = () => {
+      if (bottomSheetRef.current) {
+          bottomSheetRef.current.close(); // Close the BottomSheet
+      }
+  };
+
   const snapToIndex = (index: number) =>
     bottomSheetRef.current?.snapToIndex(index);
   const renderBackdrop = useCallback(
@@ -84,19 +91,23 @@ export function TaskType() {
           </Button>
         </View>
 
-        <ScrollView style={{ height: 850 }}>
-          {selectedTypes.map((type) => (
-            <Button
-              className="m-2 h-[50px] items-center justify-center rounded-xl"
-              textColor="black"
-              key={type}
-              mode="outlined"
-              onPress={() => navigation.navigate('New ' + type)} // TODO other screens should have this name
-            >
-              {type}
-            </Button>
-          ))}
-        </ScrollView>
+          <FlatList
+            className="h-full"
+            data={selectedTypes}
+            renderItem={
+              ({ item }) => (
+                <Button
+                  className="m-2 h-[50px] items-center justify-center rounded-xl"
+                  textColor="black"
+                  mode="outlined"
+                  onPress={() => navigation.navigate('New ' + item + "Task")}
+                >
+                  {item}
+                </Button>
+              )
+            }
+          />
+
         <BottomSheet
           ref={bottomSheetRef}
           index={0}
@@ -105,7 +116,11 @@ export function TaskType() {
           backdropComponent={renderBackdrop}
         >
           <View>
-            <Text className="m-5 text-2xl font-bold">Filter</Text>
+            <View className="flex flex-row justify-between">
+              <Text className="m-5 text-2xl font-bold">Filter</Text>
+              <CloseButton onPress={closeBottomSheet}/>
+            </View>
+
             <DropDownPicker
               open={open}
               value={selectedCategory}