I need to make a text input that shows a list of items as soon as you start typing. And only those items(in the list) can be selected as the option for input. I tried using the picker component but I need to add a feature where the user can type and items related to it will be shown in the dropdown/picker and then the user will be able to select one of them as the option.
If you want to make it with your own custom design, then go with something like this:
const [filterBankList, setFilterBankList] = useState([]);
const [bankName, setBankName] = useState('');
<TextInput
value={bankName}
placeholder={strings.selectBankName}
style = {styles.textInput}
onChangeText={filterBanks}
/>
<FlatList
data={filterBankList}
renderItem={({item, index}) => (
<TouchableOpacity
onPress={() => onBankSelected(item?.bank)}>
<VariantsBox>
<Text
>
{item?.bank || ''}
</Text>
</VariantsBox>
</TouchableOpacity>
)}
keyExtractor={item => item.bank}
/>
Inside your filterBanks method, you can update the filterBankList, so that the flatlist is updated with the bank name.
const filterBanks = value => {
let filterData =
bankList && bankList?.length > 0
? bankList?.filter(data =>
data?.bank?.toLowerCase()?.includes(value?.toLowerCase()),
)
: [];
setFilterBankList([...filterData]);
};
Inside your onBankSelected(which you call when you have selected one of the options), then just set the bankName and empty the filterlist.
const onBankSelected = value => {
setBankName(value);
setFilterBankList([]);
};
And if you want to use some library to avoid this, you can then go with react-native-searchable-dropdown