How to get onPress event from ScrollView Component in React Native

Question

I am new to React Native. I have an app with a ScrollView component and several custom components inside it. I would like to trigger an onPressOut event from the ScrollView, so that when the user scrolls, and releases, the child components inside the ScrollView update their states. But, the ScrollView documentation does not include any press events: https://facebook.github.io/react-native/docs/scrollview.html

Other things I tried:

• I tried wrapping the scrollview inside a TouchableWithoutFeedback component, when I do this, I get an error as soon as I try to scroll:

2015-10-26 11:59:13.849 [error][tid:com.facebook.React.ShadowQueue][RCTModuleMethod.m:60] Argument 0 (NSNumber) of RCTUIManager.measure must not be null 2015-10-26 11:59:13.850 [error][tid:com.facebook.React.ShadowQueue][RCTModuleMethod.m:60] Argument 0 () of RCTUIManager.measure could not be processed. Aborting method call.

No idea what that means... Any ideas? Thanks!

Here is my code:

<View ref="theWrapperView" style={styles.theWrapperView}>
            <ScrollView 
                onScroll={this.onScroll.bind(this)}
                onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}

                style={styles.scrollView}
                contentContainerStyle={styles.scrollViewContentContainer}

                showsHorizontalScrollIndicator={true}
                scrollEventThrottle={10}
                pagingEnabled={true}
                horizontal={true}
                automaticallyAdjustContentInsets={false}
                snapToAlignment={'center'}
                snapToInterval={20}
                zoomScale={1.5}
                centerContent = {true}

            >
                {cards}
            </ScrollView>
        </View>

When I change the View element to a TouchableWithoutFeedback element is when I get the error.

Answer 1

I have figured this out after investigating the React Native source code: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js

As it turns out there are actually a number of other events available via the ScrollResponder mixin, that are not mentioned in the online documentation. It is not necessary to include the mixin to access these events, since they are already part of the ScrollView component. The one that was useful for me was onResponderRelease, which fires when you release the ScrollView, like so:

<View ref="theWrapperView" style={styles.theWrapperView}>
            <ScrollView 
                onScroll={this.onScroll.bind(this)}
                onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}
                onResponderRelease = {this.onResponderReleaseHandler.bind(this)}
            >
                {cards}
            </ScrollView>
        </View>

and in the class define a handler:

onResponderRelease(){
//do stuff

}