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.
1
-
Please provide enough code so others can better understand or reproduce the problem.Community– Community Bot2022-01-21 10:19:32 +00:00Commented Jan 21, 2022 at 10:19
Add a comment
|
1 Answer
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
1 Comment
Matt Laszcz
I try solutions similar to this but when I use TextInput it does not allow me to nest non-text components inside of it....how was that possible here?