I would love to have a search bar in "Select" component from the library native-base in react-native.
I have tried adding a "TextInput" component inside the "Select" component. In UI it aligns perfectly, but when I click on the "TextInput" it gets selected and the list drops down.
Following is the code I tried:
<Select
w={w}
h={h}
variant="outline"
selectedValue={selectedValue}
minWidth="200"
// borderColor={primaryColor}
accessibilityLabel={accessibilityLabel?accessibilityLabel: "Choose Service" }
placeholder={placeholder?placeholder: "Choose Service"}
_selectedItem={{
bg:"coolGray.200",
// endIcon: <CheckIcon size="5" />
}}
mt={1}
onValueChange={onValueChange}
>
<Input
placeholder="Search"
variant="filled"
width="100%"
h={heightPercentageToDP("6%")}
borderRadius="10"
py="1"
px="2"
borderWidth="0"
/>
{
data?.map(item => {
return(
<Select.Item
label={item.label}
value={item.value}
/>
)
})
}
</Select>
Select box of native base has prop _actionSheetBody, it contains IFlatListProps so you can use ListHeaderComponent in there. So can use this way.
You use a state to save search value:
const [searchValue, setSearchValue] = React.useState<string>('');
Edit select box
`
<Select w={w} h={h} variant="outline" selectedValue={selectedValue}
minWidth="200"
accessibilityLabel={accessibilityLabel?accessibilityLabel: "Choose Service" }
placeholder={placeholder?placeholder: "Choose Service"}
_selectedItem={{
bg:"coolGray.200",
// endIcon: <CheckIcon size="5" />
}}
mt={1}
onValueChange={onValueChange}
_actionSheetBody={{
ListHeaderComponent: <FormControl px={3} mb={3}>
<Input
px={15}
py={2}
fontSize={16}
value={searchValue}
placeholder=""
_focus={{ bg: colors.white['50'], borderColor: 'darkBlue.600' }}
type='text'
onChangeText={(value: string) => {
setSearchValue(value);
}}
/>
</FormControl>
}}
>
<Input
placeholder="Search"
variant="filled"
width="100%"
h={heightPercentageToDP("6%")}
borderRadius="10"
py="1"
px="2"
borderWidth="0"
/>
{
(data && data.length)?data.filter((item)=>{
// you filter with searchValue
return true;
}).map(item => {
return(
<Select.Item
label={item.label}
value={item.value}
/>
)
})
}
</Select>