Necesito hacer una entrada de texto que muestre una lista de elementos tan pronto como empieces a escribir. Y solo esos elementos (en la lista) se pueden seleccionar como la opción de entrada. Intenté usar el componente selector, pero necesito agregar una función en la que el usuario pueda escribir y los elementos relacionados se mostrarán en el menú desplegable/selector y luego el usuario podrá seleccionar uno de ellos como opción.
Si quieres hacerlo con tu propio diseño personalizado, ve con algo como esto:
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} />Dentro de su método filterBanks, puede actualizar filterBankList, de modo que la lista plana se actualice con el nombre del banco.
const filterBanks = value => { let filterData = bankList && bankList?.length > 0 ? bankList?.filter(data => data?.bank?.toLowerCase()?.includes(value?.toLowerCase()), ) : []; setFilterBankList([...filterData]); };Dentro de su onBankSelected (al que llama cuando ha seleccionado una de las opciones), simplemente configure el nombre del banco y vacíe la lista de filtros.
const onBankSelected = value => { setBankName(value); setFilterBankList([]); };Y si quiere usar alguna biblioteca para evitar esto, puede ir con react-native-searchable-dropdown