diff --git a/package-lock.json b/package-lock.json index 9b523e6..261714a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "expo-status-bar": "~3.0.9", "react": "19.1.0", "react-native": "^0.81.5", + "react-native-dropdown-select-list": "^2.0.5", "react-native-fullwidth-image": "^0.1.3", "react-native-gesture-handler": "~2.28.0", "react-native-reanimated": "~4.1.1", @@ -7446,6 +7447,11 @@ "react-native-reanimated": ">= 2.0.0" } }, + "node_modules/react-native-dropdown-select-list": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/react-native-dropdown-select-list/-/react-native-dropdown-select-list-2.0.5.tgz", + "integrity": "sha512-TepbcagQVUMB6nLuIlVU2ghRpQHAECOeZWe8K04ymW6NqbKbxuczZSDFfdCiABiiQ2dFD+8Dz65y4K7/uUEqGg==" + }, "node_modules/react-native-fullwidth-image": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/react-native-fullwidth-image/-/react-native-fullwidth-image-0.1.3.tgz", diff --git a/package.json b/package.json index 1bf42e4..215c635 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "expo-status-bar": "~3.0.9", "react": "19.1.0", "react-native": "^0.81.5", + "react-native-dropdown-select-list": "^2.0.5", "react-native-fullwidth-image": "^0.1.3", "react-native-gesture-handler": "~2.28.0", "react-native-reanimated": "~4.1.1", diff --git a/src/components/UI/Form.js b/src/components/UI/Form.js index 394c141..66b9439 100644 --- a/src/components/UI/Form.js +++ b/src/components/UI/Form.js @@ -1,6 +1,5 @@ import {KeyboardAvoidingView, ScrollView, StyleSheet, Text, TextInput, View} from "react-native"; -import {Picker} from "@react-native-picker/picker"; - +import {SelectList} from "react-native-dropdown-select-list"; import {Button, ButtonTray} from "./Button"; import Icons from "./Icons"; @@ -46,31 +45,24 @@ const InputText = ({label, value, onChange}) => { const InputSelect = ({label, prompt, options, value, onChange}) => { // Initialisation ------------- + const selectListData = options.map((option) => ({ + key: option.value, + value: option.label, + })); // State ---------------------- // Handlers ------------------- // View ----------------------- return ( {label} - - - { - options.map((option, index) => ) - } - + item.key === value)} + boxStyles={styles.selectListBoxStyle} + dropdownStyles={styles.selectListDropdownStyle} + /> ) }; @@ -102,12 +94,17 @@ const styles = StyleSheet.create({ formContainer: { gap: 10 }, - itemPickerStyle: { + selectListBoxStyle: { height: 50, - backgroundColor: 'whitesmoke', + backgroundColor: "whitesmoke", + borderRadius: 7, + borderWidth: 1, + borderColor: "lightgrey", + paddingLeft: 10, + paddingTop: 15, }, - itemPickerPromptStyle: { - color: 'gray', + selectListDropdownStyle: { + borderColor: "lightgrey", }, });