Browse Source

Changing shadow lib in searchable picker and increasing height

master
GabrielTrettel 3 years ago
parent
commit
7c8b94b34b
  1. 43
      src/app/components/SearchablePicker.js

43
src/app/components/SearchablePicker.js

@ -6,6 +6,7 @@ import DropDownPicker from "react-native-dropdown-picker";
import { Shadow } from "react-native-shadow-2"; import { Shadow } from "react-native-shadow-2";
import { useFormikContext } from "formik"; import { useFormikContext } from "formik";
import { ErrorMessage } from "./forms"; import { ErrorMessage } from "./forms";
import defaultStyles from "../config/styles";
function DropDown({ function DropDown({
value, value,
@ -39,6 +40,8 @@ function DropDown({
borderRadius: 6, borderRadius: 6,
borderColor: colors.grayBG, borderColor: colors.grayBG,
borderWidth: 1, borderWidth: 1,
...defaultStyles.shadow,
height: 58,
}} }}
textStyle={{ textStyle={{
color: colors.medium, color: colors.medium,
@ -66,17 +69,15 @@ function SearchablePicker({
marginRight = 2, marginRight = 2,
marginLeft = 16, marginLeft = 16,
}) { }) {
const { values, setFieldValue, errors, touched } = name ? useFormikContext() : [1,1,1,1];
const { values, setFieldValue, errors, touched } = name
? useFormikContext()
: [1, 1, 1, 1];
const [value, setValue] = useState(name ? values[name] : ""); const [value, setValue] = useState(name ? values[name] : "");
useEffect(() => { useEffect(() => {
if (name)
setFieldValue(name, value, true);
else
setSelected(value)
if (name) setFieldValue(name, value, true);
else setSelected(value);
}, [value]); }, [value]);
return ( return (
@ -86,25 +87,17 @@ function SearchablePicker({
{ marginLeft: marginLeft, marginRight: marginRight }, { marginLeft: marginLeft, marginRight: marginRight },
]} ]}
> >
<Shadow
offset={[0, 3]}
distance={3}
radius={4}
startColor="rgba(0, 0, 0, 0.15)"
paintInside={true}
>
<DropDown
value={value}
setValue={setValue}
items={items}
setItems={setItems}
formPlaceholder={formPlaceholder}
searchPlaceholder={searchPlaceholder}
nothingToShow={nothingToShow}
/>
</Shadow>
<DropDown
value={value}
setValue={setValue}
items={items}
setItems={setItems}
formPlaceholder={formPlaceholder}
searchPlaceholder={searchPlaceholder}
nothingToShow={nothingToShow}
/>
{name && (<ErrorMessage error={errors[name]} visible={touched[name]} />)}
{name && <ErrorMessage error={errors[name]} visible={touched[name]} />}
</View> </View>
); );
} }

Loading…
Cancel
Save