Adding more spacing to searcheble picker list items

src/app/components/SearchablePicker.js

@@ -3,7 +3,6 @@ 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";
 import { useFormikContext } from "formik";
 import { ErrorMessage } from "./forms";
 import defaultStyles from "../config/styles";
@@ -16,6 +15,7 @@ function DropDown({
   formPlaceholder,
   searchPlaceholder,
   nothingToShow,
+  doubleItemLine,
 }) {
   const [open, setOpen] = useState(false);
 
@@ -54,6 +54,16 @@ function DropDown({
       modalProps={{
         animationType: "fade",
       }}
+      selectedItemLabelStyle={{
+        fontWeight: "bold",
+      }}
+      listItemContainerStyle={
+        doubleItemLine && {
+          marginVertical: 5,
+          numberOfLines: 3,
+          height: 50,
+        }
+      }
     />
   );
 }
@@ -68,6 +78,7 @@ function SearchablePicker({
   nothingToShow = "Não encontramos nada com esse termo",
   marginRight = 2,
   marginLeft = 16,
+  doubleItemLine = false,
 }) {
   const { values, setFieldValue, errors, touched } = name
     ? useFormikContext()
@@ -95,6 +106,7 @@ function SearchablePicker({
         formPlaceholder={formPlaceholder}
         searchPlaceholder={searchPlaceholder}
         nothingToShow={nothingToShow}
+        doubleItemLine={doubleItemLine}
       />
 
       {name && <ErrorMessage error={errors[name]} visible={touched[name]} />}

src/app/screens/RegisterScreen.js

@@ -212,6 +212,7 @@ function InstitutionNamePicker({ name }) {
       items={items}
       setItems={setItems}
       formPlaceholder={"Selecione o nome da instituição"}
+      doubleItemLine={true}
       nothingToShow={
         institutions?.state?.instType
           ? "Não encontramos nada com esse termo"