how to make TextInput with dropdown/picker in react-native?

user_16214030 0
Viewed 3369

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.

react-native reactjs user-input javascript
1 Answers

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

user_104358370
Related