When I use RNPickerSelect I get my items in the dropdown, but right before the first one there is an empty value which I want to remove. I just want the first item to be selected automatically. Does anyone know how to solve this?
The interface I use to declare the props and reuse them in the parent component
interface AutoSuggestProps {
types: IRequest[];
onSelect: (item: string) => void;
disabled: boolean;
placeholderLabel: string;
title: string;
dropdownValue: string;
setDropDownValue: (val: string) => void;
}
Here I am creating a component which uses the React Native component
export const DropdownList = ({
currencyType,
onSelect,
disabled,
placeholderLabel,
title,
dropdownValue,
setDropDownValue,
}: AutoSuggestProps): JSX.Element => {
return (
<View>
I have used it like this because it was only way I could get at least the first item. But the problem is on top of the first item, there is an empty element that is selectable
<RNPickerSelect
disabled={false}
value={dropdownValue}
onValueChange={el => {
setDropdownValue(el);
onSelect(el);
}}
If I use the placeholder like this placeholder: {{value: dropdownvalue, label: dropdownvalue}}
, a label 'Select item is printed' which I don't want.
placeholder={{}}
items={types}
useNativeAndroidPickerStyle={false}
Icon={() => {
return <DropdownArrowSVG_noFill width={(width + height) / 50} height={(width + height) / 50} fill={dropdownColor} />;
}}
/>
</View>
)
})