React Native: TouchableOpacity onPress problems inside a ScrollView
<p>I am running react native 0.24.1 and I am experiencing an issue with the <code>&lt;TouchableOpacity&gt;</code> component when it is placed inside an <code>&lt;ScrollView&gt;</code>.</p>

<p>Its <strong>onPress</strong> events fire fine but there is a special case when they do not.
If along with the <code>&lt;TouchableOpacity&gt;</code> component you have a <code>&lt;TextInput&gt;</code>, and the current focus is on the <code>&lt;TextInput&gt;</code> box, then you may click on the <code>&lt;TouchableOpacity&gt;</code> and you will see its <strong>onPress</strong> event WILL NOT be fired.</p>

<p>At least the first time you do it. Once the focus is NOT on the <code>&lt;TextInput&gt;</code> anymore, you can now press on the <code>&lt;TouchableOpacity&gt;</code> component and its <strong>onPress</strong> event will fire just fine.</p>

<p>Note that if the <code>&lt;TouchableOpacity&gt;</code> component is placed inside a <code>&lt;View&gt;</code> instead of an <code>&lt;ScrollView&gt;</code> everything works as expected and the above issue does not apply.</p>

<p>Here is some code to demonstrate the problem:</p>

<pre><code>const React = require('react-native');
const {
  Component,
  Dimensions,
  View,
  ScrollView,
  Text,
  TextInput,
  TouchableOpacity,
} = React;


// ----------------------------------------------------------------------------
class TouchableOpacityTest extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {count_onPress:0,count_onPressIn:0,count_onPressOut:0,count_onLongPress:0};
  }
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  onPressEvent(what,e) {
    console.log('what:',what);
    let newState = {};
    newState['count_'+what] = ++this.state['count_'+what];
    this.setState(newState);
  }
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  render() {
    let touchableProps = {
      onPress: this.onPressEvent.bind(this,'onPress'),
      onPressIn: this.onPressEvent.bind(this,'onPressIn'),
      onPressOut: this.onPressEvent.bind(this,'onPressOut'),
      onLongPress: this.onPressEvent.bind(this,'onLongPress'),
    }

    return (
      &lt;View style={{flex:1,flexDirection:'column',justifyContent:'flex-start',alignItems:'center',backgroundColor:'blue'}} &gt;
        &lt;ScrollView style={{width:Dimensions.get('window').width*0.9,backgroundColor:'red'}}&gt;
          &lt;TextInput style={{backgroundColor:'rgb(200,200,200)',marginTop:14}}
            placeholder="Focus on me,hide keyboard,and click on text below"
            autoCorrect={false}
          /&gt;
          &lt;TouchableOpacity {...touchableProps} &gt;
            &lt;Text style={{fontSize:20,backgroundColor:'pink',marginTop:14}}&gt;
              Click on me!{"\n"}
              onPress:{this.state.count_onPress}{"\n"}
              onPressIn:{this.state.count_onPressIn}{"\n"}
              onPressOut:{this.state.count_onPressOut}{"\n"}
              onLongPress:{this.state.count_onLongPress}{"\n"}
            &lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/ScrollView&gt;
      &lt;/View&gt;
    );
  }
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
}
// ----------------------------------------------------------------------------
AppRegistry.registerComponent('react_native_app1', () =&gt; TouchableOpacityTest);
</code></pre>

<p>You may replace the <code>&lt;ScrollView&gt;</code> with a <code>&lt;View&gt;</code> component on the above code and you will see that <strong>onPress</strong> event fires every time, even when the focus is on the <code>&lt;TextView&gt;</code></p>

<p><strong><em>NOTE:</em></strong> I am working on Android. I have no idea if this happens also on iOS.</p>

<p><strong><em>NOTE 2:</em></strong> According to Aakash Sigdel, this is indeed happening on iOS too.</p>