title: React Native TextInput and FlatList capturing onPress of ListItem
body: <p>So I am trying to create an Autocomplete Search Box having 2 sibling views TextInput and FlatList (which is only displayed when <code>this.state.data.length&gt; 0</code>) so my render function is given below : -</p>
  
  <pre><code> renderItem = ({ item }) =&gt; {
            return (
              &lt;TouchableOpacity 
               onPress={(item) =&gt; {/* do something here */}}&gt;
               &lt;Text&gt;{item.key}&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            );
          }
  
  render(){
    return (
     &lt;View&gt;
       &lt;TextInput /&gt;
       {this.state.data.length &gt; 0 &amp;&amp; 
         &lt;FlatList 
         data={this.state.data}
         renderItem={this.renderItem} /&gt;}
     &lt;/View&gt;);
  }
  </code></pre>
  
  <p>The problem is when I click on the list item the first click triggers the <code>onEndEditing</code> callback of the <code>TextInput</code> and then the second click triggers the <code>onPress</code> of the <code>TouchableOpacity</code> of the list item.</p>
  
  <p>How can I trigger the onPress of the list item on the first click please?</p>
  
  <p><a href="https://i.stack.imgur.com/lkn3t.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lkn3t.gif" alt="demo gif"></a></p>