React Native - Text Input that allows user to enter input but also choose input from a list of options after he start typing

Question

I want to create a component with Text Input and FlatList that accepts input values from user but also from a dropdown list after he starts typing. Has anyone made an implementation like this? I am struggling to create it.

Explanation: Say for example you have a input field where you have to enter a location. When the user starts typing for example “Pa” , a list of choices is displayed like “Paris”, “Pasadena” etc, but the user doesn’t want any of the choices but instead wants to write another location that is not displayed on the list. I want to create a component that allows the user to choose between these two functionalities: write the location or choose from the list

Answer 1

Is your question about implementing the autocomplete logic or about what components to use to achieve the desired view?

We simply list the suggestions using a map function below the TextInput to display the list of suggestions. Something like this

render (
  <View>
    <TextInput {...props} />
    <View>
      {suggestionsList.map((item) => renderSuggestion({ item }))}
    </View>
  </View>
);


function renderSuggestion({ item }) {
  return (
    <TouchableOpacity>
      <View>
        <Text>{item}</Text>
      </View>
    </TouchableOpacity>
  );
} 

To implement the autocomplete logic we use tries