frontend/app/(app)/(tabs)/beer/add.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import Button from "@components/Button";
 import { colors } from "@components/style";
 import * as ImagePicker from "expo-image-picker";
-import { Picker } from "@react-native-picker/picker";
+import DropDownPicker from "react-native-dropdown-picker";
 
 export default function BeerAdd() {
 	const [b_name, setBName] = useState("");
@@ -13,6 +13,16 @@ export default function BeerAdd() {
 	const [image, setImage] = useState(null);
 	const [selectPackaging, setSelectedPackaging] = useState();
 
+	const [open, setOpen] = useState(false);
+	const [value, setValue] = useState(null);
+	const [items, setItems] = useState([
+		{ label: "Can", value: "can" },
+		{ label: "Glass bottle", value: "glass" },
+		{ label: "Oddel barrel", value: "barrel" },
+		{ label: "Tank", value: "tank" },
+		{ label: "PET bottle", value: "PET" },
+	]);
+
 	ImagePicker.getCameraPermissionsAsync(); //check if the user has granted permission to access the camera
 	const pickImage = async () => {
 		const permissionResult =
@@ -114,19 +124,16 @@ export default function BeerAdd() {
 					onChangeText={(text) => setBPackaging(text)}
 					placeholderTextColor="#aaaaaa"
 				/>
-				<Picker
-					selectedValue={selectPackaging}
-					onValueChange={(itemValue, itemIndex) =>
-						setSelectedPackaging(itemValue)
-					}
-				>
-					<Picker.Item label="Can" value="can" />
-					<Picker.Item label="Glass" value="glass" />
-					<Picker.Item label="Pint" value="pint" />
-					<Picker.Item label="Oddel Barrel" value="oddelBarel" />
-					<Picker.Item label="Tank" value="tank" />
-					<Picker.Item label="PET bottle" value="petBottle" />
-				</Picker>
+				<DropDownPicker
+					open={open}
+					value={value}
+					items={items}
+					setOpen={setOpen}
+					setValue={setValue}
+					setItems={setItems}
+					placeholder={"What are you drinking from?"}
+					theme="DARK"
+				/>
 				<View style={styles.imageContainer}>
 					<Button
 						style={styles.imageButton}

frontend/package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "@expo/metro-runtime": "~3.2.1",
         "@react-native-async-storage/async-storage": "^1.23.1",
-        "@react-native-picker/picker": "2.7.5",
         "@types/react": "~18.2.45",
         "axios": "^1.6.8",
         "expo": "^51.0.2",
@@ -25,6 +24,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.74.1",
+        "react-native-dropdown-picker": "^5.4.6",
         "react-native-safe-area-context": "4.10.1",
         "react-native-screens": "3.31.1",
         "react-native-web": "~0.19.6"
@@ -5581,15 +5581,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@react-native-picker/picker": {
-      "version": "2.7.5",
-      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.7.5.tgz",
-      "integrity": "sha512-vhMaOLkXSUb+YKVbukMJToU4g+89VMhBG2U9+cLYF8X8HtFRidrHjohGqT8/OyesDuKIXeLIP+UFYI9Q9CRA9Q==",
-      "peerDependencies": {
-        "react": "*",
-        "react-native": "*"
-      }
-    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.74.83",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.83.tgz",
@@ -12886,6 +12877,15 @@
         }
       }
     },
+    "node_modules/react-native-dropdown-picker": {
+      "version": "5.4.6",
+      "resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.6.tgz",
+      "integrity": "sha512-T1XBHbE++M6aRU3wFYw3MvcOuabhWZ29RK/Ivdls2r1ZkZ62iEBZknLUPeVLMX3x6iUxj4Zgr3X2DGlEGXeHsA==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-helmet-async": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-native-helmet-async/-/react-native-helmet-async-2.0.4.tgz",

frontend/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "@expo/metro-runtime": "~3.2.1",
     "@react-native-async-storage/async-storage": "^1.23.1",
-    "@react-native-picker/picker": "2.7.5",
     "@types/react": "~18.2.45",
     "axios": "^1.6.8",
     "expo": "^51.0.2",
@@ -26,6 +25,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
+    "react-native-dropdown-picker": "^5.4.6",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-web": "~0.19.6"