I am using scrollview and want to determine when the user will complete the drag event. I put console.log for onScrollEndDrag and it does not give any output to the console, i.e. OnScrollEndDrag not detected. Is there any way 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> ); }, });