title: React Native: onBlur fires after onPress
body: <p>I have a TouchableOpacity and a TextInput inside a ScrollView, when the TextInput is focused an I press the TouchableOpacity I wanna fire <strong>first the onBlur and then the onPress</strong>. What happens? with keyboardShouldPersistTaps=&quot;never&quot; the onPress won't execute at all and with &quot;handled&quot; the onBlur won't execute at all and the input won't lose focus. I noticed that with TouchableOpacity imported from 'react-native-gesture-handler' and not from 'react-native', and keyboardShouldPersistTaps to &quot;never&quot; both onPress and onBlur will execute but the problem here is that the onBlur comes after the onPress! Any solution?</p>
  <pre><code>&lt;ScrollView keyboardShouldPersistTaps=&quot;never&quot;&gt;
    &lt;TouchableOpacity onPress={() =&gt; console.log('press')}&gt;
      &lt;Text&gt;Click me&lt;/Text&gt;
    &lt;/TouchableOpacity&gt;
    &lt;TextInput value={value} onBlur={() =&gt; console.log('blur')} /&gt;
  &lt;/ScrollView&gt;
  </code></pre>
  <p>expected output with field focused and pressing the touchable:</p>
  <pre><code>blur
  press
  </code></pre>
  <p>edit: a more complicated scenario</p>
  <pre><code>//one component
  &lt;ScrollView keyboardShouldPersistTaps=&quot;handled&quot;&gt;
    &lt;TextInput value={value} onBlur={() =&gt; console.log('blur')} /&gt; 
    &lt;TextInput value={value} onBlur={() =&gt; console.log('blur')} /&gt; 
    &lt;TextInput value={value} onBlur={() =&gt; console.log('blur')} /&gt; 
  &lt;/ScrollView&gt;
  
  //another component
  &lt;TouchableOpacity onPress={() =&gt; console.log('press')}&gt;
      &lt;Text&gt;Click me&lt;/Text&gt;
  &lt;/TouchableOpacity&gt;
  </code></pre>
  <p>Both Components would be rendered inside a Bigger Component.</p>