Merge pull request #27 from MyTaskly/fix-picker-ios-category

fix-picker-ios-category

Author: Gabry848

.claude/settings.local.json

@@ -79,7 +79,15 @@
       "mcp__revenuecat__list-offerings",
       "mcp__revenuecat__get-product",
       "mcp__revenuecat__get-product-store-state",
-      "Bash(git reset *)"
+      "Bash(git reset *)",
+      "Bash(but branch *)",
+      "Bash(but commit *)",
+      "Bash(but stage *)",
+      "Bash(but diff *)",
+      "Bash(but log *)",
+      "Bash(but *)",
+      "Bash(git restore *)",
+      "Bash(npx skills *)"
     ],
     "deny": [],
     "defaultMode": "acceptEdits"

package-lock.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@expo-google-fonts/inter": "^0.4.2",
+    "@expo/react-native-action-sheet": "^4.1.1",
     "@expo/vector-icons": "^14.0.2",
     "@flyerhq/react-native-chat-ui": "^1.4.3",
     "@openspacelabs/react-native-zoomable-view": "^2.3.1",

package.json

@@ -12,9 +12,9 @@ import {
   PanResponder,
   Dimensions,
 } from "react-native";
-import { Picker } from "@react-native-picker/picker";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 import { Ionicons } from "@expo/vector-icons";
+import { useActionSheet } from '@expo/react-native-action-sheet';
 import { addTaskToList } from "../TaskList/types";
 import { getCategories } from "../../services/taskService";
 import dayjs from "dayjs";
@@ -50,12 +50,11 @@ const AddTask: React.FC<AddTaskProps> = ({
   allowCategorySelection = false,
 }) => {
   const { t } = useTranslation();
+  const { showActionSheetWithOptions } = useActionSheet();
   const [categoriesOptions, setCategoriesOptions] = useState<
     { label: string; value: string }[]
   >([]);
-  const [localCategory, setLocalCategory] = useState<string>(
-    categoryName || ""
-  );
+  const [localCategory, setLocalCategory] = useState<string>("");
   const [categoryError, setCategoryError] = useState<string>("");
   const [priority, setPriority] = useState<number>(1);
   const [title, setTitle] = useState("");
@@ -337,30 +336,44 @@ const AddTask: React.FC<AddTaskProps> = ({
             {allowCategorySelection && (
               <>
                 <Text style={styles.inputLabel}>Categoria *</Text>
-                <View
+                <TouchableOpacity
                   style={[
-                    styles.dropdown,
+                    styles.categoryButton,
                     categoryError ? styles.inputError : null,
                   ]}
+                  onPress={() => {
+                    const options = [
+                      ...categoriesOptions.map(cat => cat.label),
+                      'Annulla'
+                    ];
+                    const cancelButtonIndex = options.length - 1;
+
+                    showActionSheetWithOptions(
+                      {
+                        options,
+                        cancelButtonIndex,
+                        title: 'Seleziona categoria',
+                        message: 'Scegli una categoria per il task',
+                      },
+                      (buttonIndex) => {
+                        if (buttonIndex !== cancelButtonIndex) {
+                          setLocalCategory(categoriesOptions[buttonIndex].value);
+                          setCategoryError("");
+                        }
+                      }
+                    );
+                  }}
                 >
-                  <Picker
-                    selectedValue={localCategory}
-                    onValueChange={(itemValue) => {
-                      setLocalCategory(itemValue as string);
-                      if (itemValue) setCategoryError("");
-                    }}
-                    style={styles.picker}
+                  <Text
+                    style={[
+                      styles.categoryButtonText,
+                      !localCategory && styles.categoryPlaceholder
+                    ]}
                   >
-                    <Picker.Item label="Seleziona categoria" value="" />
-                    {categoriesOptions.map((option, index) => (
-                      <Picker.Item
-                        key={index}
-                        label={option.label}
-                        value={option.value}
-                      />
-                    ))}
-                  </Picker>
-                </View>
+                    {localCategory || "Seleziona categoria"}
+                  </Text>
+                  <Ionicons name="chevron-down" size={20} color="#666666" />
+                </TouchableOpacity>
                 {categoryError ? (
                   <Text style={styles.errorText}>{categoryError}</Text>
                 ) : null}
@@ -847,10 +860,14 @@ const styles = StyleSheet.create({
     fontSize: 17,
     fontFamily: "System",
   },
-  dropdown: {
+  categoryButton: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
     borderWidth: 1.5,
     borderColor: "#e1e5e9",
     borderRadius: 16,
+    padding: 16,
     marginBottom: 20,
     backgroundColor: "#ffffff",
     shadowColor: "#000",
@@ -862,9 +879,14 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 1,
   },
-  picker: {
-    height: 50,
+  categoryButtonText: {
+    fontSize: 17,
     color: "#000000",
+    fontFamily: "System",
+    fontWeight: "400",
+  },
+  categoryPlaceholder: {
+    color: "#999999",
   },
   disabledText: {
     color: "#ccc",

src/components/Task/AddTask.tsx

@@ -9,6 +9,7 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { AppState, BackHandler, Linking } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { Ionicons } from "@expo/vector-icons";
+import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 import {
   initAnalytics,
   trackScreenView,
@@ -588,14 +589,16 @@ export default function Navigation() {
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }} onLayout={onLayoutRootView}>
-      <LanguageProvider>
-        <TutorialProvider>
-          <NavigationContainer>
-            <AppStack />
-          </NavigationContainer>
-          <TutorialOnboardingWrapper />
-        </TutorialProvider>
-      </LanguageProvider>
+      <ActionSheetProvider>
+        <LanguageProvider>
+          <TutorialProvider>
+            <NavigationContainer>
+              <AppStack />
+            </NavigationContainer>
+            <TutorialOnboardingWrapper />
+          </TutorialProvider>
+        </LanguageProvider>
+      </ActionSheetProvider>
     </GestureHandlerRootView>
   );
 }