Touchable* onPress not working on ScrollView composition

Description

I have one ScrollView(a) containing another ScrollView(b) and a TouchableOpacity© floating on top for (b). While scrolling on (b), onPress on © is not triggered.

• This only happens when scrollEventThrottle is 50 or less
• Scroll on (a) is disabled.
• It doesn’t matter the direction of (a) or (b).

Reproduction

Use the following code, scroll and press the yellow square button. The button will only work if you’re not scrolling.

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  ScrollView,
  TouchableOpacity,
  Dimensions,
} from 'react-native';

const {width,height} = Dimensions.get('window');

export default class scrollplusbutton extends Component {
  render() {
    const color = ['green','red','blue'];
    return (
      <ScrollView scrollEnabled={false}>

        <View style={{width, height}}>

          <ScrollView scrollEventThrottle={50}>
            {[...Array(20)].map((_, i) =>
              <View key={i} style={{height:i*50, backgroundColor:color[i%color.length]}}/>
            )}
          </ScrollView>

          <TouchableOpacity
            style={{
              position:'absolute',
              left:0,
              top:0,
              width:100,
              height:100,
              backgroundColor:'yellow',
            }}
            onPress={()=>alert('hello!')}
          />

        </View>

      </ScrollView>
    );
  }
}

AppRegistry.registerComponent('scrollplusbutton', () => scrollplusbutton);

Additional Information

• React Native version: “react”: “15.3.2” and “react-native”: “^0.37.0”
• Platform: iOS (works well on Android)
• Operating System: MacOS

[sachinrekhi]

It appears that the ScrollView is intercepting and cancelling the onPress event. The workaround I found was to set delayPressIn={0} and attach to the onPressIn event instead of onPress.

[Sam1301]

faced same issue, solved it by wrapping the contents of TouchableWithoutFeedback within a View component.