Changing SchoolPicker to SearchablePicker and switching to new component

src/app/components/SchoolPicker.js

@@ -1,131 +0,0 @@
-import React, { useState, Fragment } from "react";
-import { StyleSheet, View } from "react-native";
-
-import { FontAwesome5 } from "@expo/vector-icons";
-import colors from "../config/colors";
-import SearchableDropdown from "react-native-searchable-dropdown";
-
-const items = [
-  //substituir posteriormente pelas escolas
-  {
-    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",
-  }, 
-  {
-    id: 7,
-    name: "Python",
-  },
-  {
-    id: 8,
-    name: "Python",
-  },
-
-  {
-    id: 9,
-    name: "Python",
-  },
-];
-
-function SchoolPicker(props) {
-  const [selectedItems, setSelectedItems] = useState(null);
-
-  const selected = (i) => {
-    setSelectedItems(i);
-    props.itemSelected(i);
-    //console.log(i.name);
-  };
-
-  return (
-    <View style={{ width: "100%" }}>
-      <View style={styles.location}>
-        <View style={styles.mapIcon}>
-          <FontAwesome5
-            name="university"
-            size={30}
-            color={colors.primary}
-          />
-        </View>
-        <View style={styles.adressText}>
-          <Fragment>
-            <SearchableDropdown
-              multi={false}
-              selectedItems={selectedItems}
-              onItemSelect={(item) => {
-                selected(item);
-              }}
-              itemStyle={{
-                padding: 10,
-                marginTop: 2,
-                backgroundColor: "#fff",
-                borderColor: "#bbb",
-                borderWidth: 1,
-                borderRadius: 6,
-                width: "100%",
-              }}
-              itemTextStyle={{ color: "#222" }}
-              itemsContainerStyle={{ maxHeight: "100%" }}
-              items={items}
-              chip={true}
-              resetValue={false}
-              textInputProps={{
-                placeholder: "Escola onde você estuda...",
-                underlineColorAndroid: "transparent",
-                style: {
-                  padding: 12,
-                  borderWidth: 1,
-                  borderColor: "#ccc",
-                  borderRadius: 5,
-                  alignItems: "flex-start",
-                  backgroundColor: colors.white,
-                  alignContent: "flex-start",
-                },
-                onTextChange: (text) => console.log(text),
-              }}
-            />
-          </Fragment>
-        </View>
-      </View>
-    </View>
-  );
-}
-
-SchoolPicker.defaultProps = {
-  itemSelected: () => {},
-};
-
-const styles = StyleSheet.create({
-  location: {
-    flexDirection: "row",
-  },
-  adressText: {
-    flex: 1
-  },
-  mapIcon: {
-    paddingTop: 10,
-    alignSelf: "flex-start",
-    paddingRight: 12,
-
-  },
-});
-
-export default SchoolPicker;

src/app/components/SearchablePicker.js

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { StyleSheet, View } from "react-native";
+
+import colors from "../config/colors";
+import DropDownPicker from "react-native-dropdown-picker";
+import { Shadow } from "react-native-shadow-2";
+
+
+function DropDown({ value, setValue, items, setItems, formPlaceholder, searchPlaceholder }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <DropDownPicker
+      open={open}
+      listMode="MODAL"
+      value={value}
+      items={items}
+      setValue={setValue}
+      setItems={setItems}
+      setOpen={setOpen}
+      searchable={true}
+      translation={{
+        PLACEHOLDER: formPlaceholder,
+        SEARCH_PLACEHOLDER: searchPlaceholder,
+        SELECTED_ITEMS_COUNT_TEXT: "Item selecionado",
+        NOTHING_TO_SHOW: "Não encontramos nada com esse termo"
+      }}
+      style={{
+        backgroundColor: colors.white,
+        borderRadius: 6,
+        borderColor: colors.grayBG,
+        borderWidth: 1,
+      }}
+      textStyle={{
+        color: colors.medium,
+        fontSize: 18,
+      }}
+      labelStyle={{
+        color: colors.medium,
+        fontSize: 18,
+      }}
+      modalProps={{
+        animationType: "fade",
+      }}
+    />
+  );
+}
+
+function SearchablePicker({ value, setValue, items, setItems, formPlaceholder, searchPlaceholder  }) {
+  console.log(items )
+  return (
+    <View style={styles.location}>
+      <Shadow
+        offset={[0, 4]}
+        distance={4}
+        radius={4}
+        startColor="rgba(0, 0, 0, 0.25)"
+        paintInside={true}
+      >
+        <DropDown
+          value={value}
+          setValue={setValue}
+          items={items}
+          setItems={setItems}
+          formPlaceholder={formPlaceholder}
+          searchPlaceholder={searchPlaceholder}
+        />
+      </Shadow>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  location: {
+    flex: 1,
+    alignSelf: "flex-start",
+    marginRight: 12,
+    marginLeft: 12,
+  },
+});
+
+export default SearchablePicker;