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>
);
},
});