_handleScroll(event) {
event.preventDefault();
if (event.nativeEvent.contentOffset.y === styles.windowHeight || event.nativeEvent.contentOffset.y >= styles.windowHeight) {
console.log(event.nativeEvent.contentOffset.y);
{ this.state.showLoadMoreButton === true ? this._fetch_more_data_from_server() : null }
}
}
return (
<View style={this.state.loading ? styles.ridesScreenOuterDesignOpacity : styles.ridesScreenOuterDesign}>
<ImageBackground source={require('../assets/images/screencasts/citybackground.png')} style={styles.ridesScreenMainImageBackgroundCityBGDesign}>
<ScrollView onScroll={this._handleScroll} onMomentumScrollEnd={() => { this._enablePagination() }} style={styles.ridesScreenScrollViewDesign} scrollEnabled>
<ImageBackground source={require('../assets/images/screencasts/main_bg.png')} resizeMode="cover" style={styles.ridesScreenImageBackgroundMainBGDesign}>
<View style={styles.ridesScreenRidesTextImageHeaderViewDesign}>
<View style={styles.ridesTabUpperViewTextImageDesign}
>
<View style={styles.ridesScreenTextUpperMainView}>
{this.state.fontLoaded ? <Text style={styles.ridesTextDesign}>
Rides
</Text> : null}
</View>
<Image
source={
__DEV__
? require('../assets/images/ridesImages/Icons-rides.png')
: require('../assets/images/ridesImages/Icons-rides.png')
}
style={styles.ridesAvatarImageDesign}
/>
</View>
</View>
<View style={styles.ridesTabViewMainDesign}>
<TouchableOpacity onPress={() => this._tabViewOnPress("", "", "favourites")} style={this.state.hover === 'favourites' ? styles.ridesTabViewInnerBoxFavouritesDesignHovered : styles.ridesTabViewInnerBoxFavouritesDesign}>
{this.state.fontLoaded ? <Text style={this.state.hover === 'favourites' ? styles.ridesTabViewInnerBoxTextDesignSelected : styles.ridesTabViewInnerBoxTextDesign}>Your Favorites</Text> : null}
</TouchableOpacity>
<TouchableOpacity onPress={() => this._tabViewOnPress("", "", "latest")} style={this.state.hover === 'latest' ? styles.ridesTabViewInnerBoxLatestDesignHovered : styles.ridesTabViewInnerBoxLatestDesign}>
{this.state.fontLoaded ? <Text style={this.state.hover === 'latest' ? styles.ridesTabViewInnerBoxTextDesignSelected : styles.ridesTabViewInnerBoxTextDesign}>Latest</Text> : null}
</TouchableOpacity>
</View>
</ImageBackground>
<View style={styles.ridesBottomContent}>
<View>
{this.state.hover == 'favourites' ? this.state.favouritesData : null}
</View>
<View>
{this.state.hover == 'latest' ? this.state.latestData : null}
</View>
</View>
<Loading
ref="loading"
image={require('../assets/images/loadingImages/Preloader_5.gif')}
onRequestClose={() => null}
easing={Loading.EasingType.step0}
size={AppConstants.loadingImageLoaderSize}
imageSize={AppConstants.loadingImageSize}
/>
</ScrollView>
<LiveFooter navigation={this.props.navigation} current={'Rides'} />
</ImageBackground>
</View >
)
ridesScreenOuterDesignOpacity: {
flex: 1,
opacity: 0.5,
},
ridesScreenOuterDesign: {
flex: 1
},
ridesScreenMainImageBackgroundCityBGDesign: {
alignItems: 'center',
flex: 1,
height: null,
width: '100%',
zIndex: 2,
},
ridesScreenScrollViewDesign: { flex: 1, height: null, width: '100%' },
ridesScreenImageBackgroundMainBGDesign: { flex: 1, width: '100%', height: 220, zIndex: 0, },
Here all data is coming from this.state.favouritesData and this.state.latestData which has another different view and contains dyanamic data.
First time 10 records will be come which has greater height than the screen height.
On _handleScroll() call, I want to call some Load More pagination code and I want to load 10 more records.
The issue is when I just scroll to 3 or 4 records, _handleScroll() is being called and pagination also calls and 10 more records will be loaded.
Because, ScrollView height is greater than the window height. So, how can I get actual height of Scrollview and when Scrollview will be scrolled at only bottom then and then call my pagination function?
Thank You.
