school picker for pluviometer register screen

src/app/components/SchoolPicker.js

@@ -0,0 +1,127 @@
+import React, { useContext, useState, Component, Fragment } from "react";
+import { StyleSheet, Text, View, PixelRatio, Picker } from "react-native";
+
+import { MaterialIcons } from "@expo/vector-icons";
+import { FontAwesome5 } from '@expo/vector-icons';
+import colors from "../config/colors";
+import { dimensions } from "../config/dimensions";
+import Screen from "./Screen";
+import SearchableDropdown from 'react-native-searchable-dropdown';
+
+const items = [
+    {
+        id: 1,
+        name: 'JavaScript',
+    },
+    {
+        id: 2,
+        name: 'Java',
+    },
+    {
+        id: 3,
+        name: 'Ruby',
+    },
+    {
+        id: 4,
+        name: 'React Native',
+    },
+    {
+        id: 5,
+        name: 'PHP',
+    },
+    {
+        id: 6,
+        name: 'Python',
+    },
+];
+
+function SchoolPicker() {
+    const [selectedItems, setSelectedItems] = useState(null);
+    console.log(selectedItems);
+
+
+    return (
+            <View style={{ flex: 1, width: "100%" }}>
+                <View style={styles.location}>
+                    <View style={styles.mapIcon}>
+                        <FontAwesome5
+                            name="university"
+                            size={28}
+                            color="white"
+                            alignItems="center"
+                            alignContent="center"
+                        />
+                    </View>
+                    <View style={styles.adressText}>
+                        <Fragment>
+                            <SearchableDropdown
+                                multi={false}
+                                selectedItems={selectedItems}
+                                onItemSelect={(item) => {
+                                    setSelectedItems(item)
+                                }}
+                                containerStyle={{ padding: 5 }}
+                                itemStyle={{
+                                    padding: 10,
+                                    marginTop: 2,
+                                    backgroundColor: '#ddd',
+                                    borderColor: '#bbb',
+                                    borderWidth: 1,
+                                    borderRadius: 5,
+                                }} itemTextStyle={{ color: '#222' }}
+                                itemsContainerStyle={{ maxHeight: 140 }}
+                                items={items}
+                                chip={true}
+                                resetValue={false}
+                                textInputProps={
+                                    {
+                                        placeholder: "Escola onde você estuda...",
+                                        underlineColorAndroid: "transparent",
+                                        style: {
+                                            padding: 12,
+                                            borderWidth: 1,
+                                            borderColor: '#ccc',
+                                            borderRadius: 5,
+                                        },
+                                        onTextChange: text => console.log(text)
+                                    }
+                                }
+                                listProps={
+                                    {
+                                        nestedScrollEnabled: false,
+                                    
+                                    }
+                                }
+                            />
+                        </Fragment>
+
+                    </View>
+                </View>
+            </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    location: {
+        flex: 1,
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        // backgroundColor: colors.secondary,
+    },
+    adressText: {
+        flex: 1,
+        textAlign: "center",
+    },
+    mapIcon: {
+        backgroundColor: colors.primary,
+        padding: 8,
+        width: 20,
+        alignItems: "center",
+        borderRadius: 5,
+        flex: 0.10,
+    },
+});
+
+export default SchoolPicker;

src/package-lock.json

@@ -14844,6 +14844,11 @@
       "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.10.1.tgz",
       "integrity": "sha512-Z2kKSk4AwWRQNCBmTjViuBQK0/Lx0jc25TZptn/2gKYUCOuVRvCekoA26u0Tsb3BIQ8tWDsZW14OwDlFUXW1aw=="
     },
+    "react-native-searchable-dropdown": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/react-native-searchable-dropdown/-/react-native-searchable-dropdown-1.1.3.tgz",
+      "integrity": "sha512-ip6YwjKED/h27oRQGN3f62usFMj5IfS6tr/zZWfQItCAV/XAq5E9P0Exvg/86gSlcGJnnZdoixK+PS1sElxcyA=="
+    },
     "react-native-simple-dialogs": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/react-native-simple-dialogs/-/react-native-simple-dialogs-1.4.0.tgz",

src/package.json

@@ -45,6 +45,7 @@
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",
+    "react-native-searchable-dropdown": "^1.1.3",
     "react-native-simple-dialogs": "^1.4.0",
     "react-native-svg": "^12.1.0",
     "react-native-svg-uri": "^1.2.3",