How to have a searchbar in "Select" Component native-base

Question

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>

Answer 1

Select box of native base has prop _actionSheetBody, it contains IFlatListProps so you can use ListHeaderComponent in there. So can use this way.

1. You use a state to save search value:

   const [searchValue, setSearchValue] = React.useState<string>('');

2. 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>