How to detect an end of a drag event in React-Native Android

Question

I am using a scrollview, and want to detect when the user ends the drag event. I have put a console.log for onScrollEndDrag and it doesnot give any console output, i.e. onScrollEndDrag is not being detected. Is there any way to get around this?

Please, see the code below.

var Main = React.createClass({
            getInitialState: function() {

                return {
                    LoadedPageState: false,
                    menuJson: [],
                    pageToLoad: "landingPage",
                    mainlogopic: 'mainlogo',
                    profilepic: 'profile',
                    notificationpic: 'notification',
                    bagpic: 'bag',
                    morepic: 'more',
                    moveend: 0,
                    count: 1,
                    frmDrag: false,
                }
            },
            horScrollViewInstance: {
                scrollTo: () => {}
            },
            control: {
                onscroll: () => {}
            },
            touchStart: {
                ontouchstart: () => {}
            },
            componentWillMount: function() {
                var menuJson = require('./data/data.json');
                this.setState({
                    menuJson: menuJson
                });
            },
            currentPageAction: function(pageToLoad) {
                this.setState({
                    LoadedPageState: true,
                    pageToLoad: pageToLoad
                });
            },
            currentPageBackAction: function() {
                this.setState({
                    LoadedPageState: false,
                });
            },

            currentPageView: function() {
                var currentPage = null;
                if (this.state.pageToLoad == 'landingPage') {
                    currentPage = (<LandingPage/>);
                } else if (this.state.pageToLoad == 'profilePage') {
                    currentPage = (<ProfilePage/>);
                }


                // <LoadedPage currentPageBackAction={this.currentPageBackAction} 
                //             LoadedPageActive={this.state.LoadedPageState} />
                return (<View>
                          <View style={{flex:1}}>
                          {currentPage}
                          </View>
                  </View>);
            },
            gotoLandingPage: function(isFrmDrag) {
                this.horScrollViewInstance.scrollTo(0, 0);
                this.setState({
                    pageToLoad: "landingPage",
                    frmDrag: isFrmDrag,
                });
                this.chkPage();
            },
            gotoProfilePage: function(isFrmDrag) {
                this.setState({
                    pageToLoad: "profilePage",
                    frmDrag: isFrmDrag,
                });
                this.horScrollViewInstance.scrollTo(0, width);
                this.chkPage();
            },
            gotoNotificationPage: function(isFrmDrag) {
                this.setState({
                    pageToLoad: "notificatonPage",
                    frmDrag: isFrmDrag,
                });
                this.horScrollViewInstance.scrollTo(0, 2 * width);
                this.chkPage();
            },
            gotoAddToBagPage: function(isFrmDrag) {
                this.setState({
                    pageToLoad: "addToBagPage",
                    frmDrag: isFrmDrag,

                });
                this.horScrollViewInstance.scrollTo(0, 3 * width);
                this.chkPage();
            },
            gotoMorePage: function(isFrmDrag) {
                this.setState({
                    pageToLoad: "morePage",
                    frmDrag: isFrmDrag,
                });
                this.horScrollViewInstance.scrollTo(0, 4 * width);
                this.chkPage();
            },
            restoreDefaultIcon: function() {
                this.setState({
                    mainlogopic: 'mainlogochange',
                    profilepic: 'profile',
                    notificationpic: 'notification',
                    bagpic: 'bag',
                    morepic: 'more'
                });
            },
            chkPage: function() {
                this.restoreDefaultIcon();
                if (this.state.pageToLoad == "landingPage") {
                    this.setState({
                        mainlogopic: 'mainlogo'
                    });
                } else if (this.state.pageToLoad == "profilePage") {
                    this.setState({
                        profilepic: 'profilechange'
                    });
                } else if (this.state.pageToLoad == "notificatonPage") {
                    this.setState({
                        notificationpic: 'notificationchange'
                    });
                } else if (this.state.pageToLoad == "addToBagPage") {
                    this.setState({
                        bagpic: 'bagchange'
                    });
                } else if (this.state.pageToLoad == "morePage") {
                    this.setState({
                        morepic: 'morechange'
                    });
                }
            },
            _scrollToRef: function(instance) {
                this.horScrollViewInstance.scrollTo = instance.scrollTo;
                this.control.onscroll = instance.onscroll;
                this.touchStart.ontouchstart = instance.ontouchstart;
            },
            onscroll: function(event: Object) {
                var movestart;
                movestart = event.nativeEvent.contentOffset.x;
                // this.setState({ movestart: event.nativeEvent.contentOffset.x});
                console.log(movestart);
                if (this.state.frmDrag == true) {
                    if (movestart > 3.5 * width) {
                        this.gotoMorePage(false);
                    } else if (movestart > 2.5 * width) {
                        this.gotoAddToBagPage(false);
                    }
                    if (movestart > 1.5 * width) {
                        this.gotoNotificationPage(false);
                    } else if (movestart > 0.7 * width) {
                        this.gotoProfilePage(false);
                    } else if (movestart > 0) {
                        this.gotoLandingPage(false);
                    }
                }
            },
            ontouchstart: function(event: Object) {
                console.log("hello");
                this.setState({
                    frmDrag: true
                });
            },
            render: function() {
                var navigationView = (
                    <View style={{flex: 1, backgroundColor: '#fff'}}>
                  <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Im in the Drawer!</Text>
                </View>
                );

                return (

                    <DrawerLayoutAndroid drawerWidth={300} drawerPosition={DrawerLayoutAndroid.positions.Left} renderNavigationView={() => navigationView}>
                      <View style={styles.bodyWrapr}>
                         <View style={[{flex:1}]}>
                           <ScrollView 
                                ref={this._scrollToRef}
                                onScroll={this.onscroll}   
                                onTouchStart = {this.ontouchstart}  
                                onScrollEndDrag={() => console.log('onScrollEndDrag')} 
                                onScrollBeginDrag={() => console.log('onScrollBeginDrag')}
                                onScrollEndDrag={() => console.log('onScrollEndDrag')}
                                onMomentumScrollBegin={() => console.log('onMomentumScrollBegin')}
                                onMomentumScrollEnd={() => console.log('onMomentumScrollEnd')}                
                                horizontal={true}
                                pagingEnabled={true}
                                showsHorizontalScrollIndicator={true}
                                snapToInterval={width}
                                snapToAlignment={'start'}
                                contentContainerStyle ={{flex:1}}>
                              <View style={[{flex:1, flexDirection:'row'}]}>
                                 <View style={{flex:1}}>
                                     <ScrollView showsVerticalScrollIndicator = {true}>
                                        <LandingPage/>
                                     </ScrollView>
                                 </View>
                                 <View style={{flex:1}}>
                                     <ScrollView showsVerticalScrollIndicator = {true}>
                                        <ProfilePage/>
                                     </ScrollView>
                                  </View>
                                  <View style={{flex:1}}>
                                     <ScrollView showsVerticalScrollIndicator = {true}>
                                        <NotificatonPage/>
                                     </ScrollView>
                                  </View>
                                  <View style={{flex:1}}>
                                     <ScrollView showsVerticalScrollIndicator = {true}>
                                        <AddToBagPage/>
                                     </ScrollView>
                                  </View>
                                  <View style={{flex:1}}>
                                     <ScrollView showsVerticalScrollIndicator = {true}>
                                        <MorePage/>
                                     </ScrollView>
                                  </View>
                              </View>
                           </ScrollView>
                         </View>
                      </View>
                  </DrawerLayoutAndroid>
                );
            },
        });

Answer 1

It seems to work for me. If you paste these in as props, do you get any console output?

onTouchStart={() => console.log('onTouchStart')}
onTouchMove={() => console.log('onTouchMove')}
onTouchEnd={() => console.log('onTouchEnd')}
onScrollBeginDrag={() => console.log('onScrollBeginDrag')}
onScrollEndDrag={() => console.log('onScrollEndDrag')}
onMomentumScrollBegin={() => console.log('onMomentumScrollBegin')}
onMomentumScrollEnd={() => console.log('onMomentumScrollEnd')}

I get logs in roughly this order (at the end)-

onTouchEnd
onScrollEndDrag
onMomentumScrollEnd

Answer 2

there was a bug in the prev version of react-native. Has been solved in v.0.18.0