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