I have used scrollOffset and scrollToEnd and scrollToIndex to load the items 15 wise. After loaded all items then I need to gotoUp and down only with items need to be go up and 15 item need to go down of the screen.
My issue is offset value of goToBottom is incorrect and it always adding space and it always goes to the else part and indexRange is not known to it. So it will leads to show empty space at the end. Here is my code.
<View style={{flex:1}}>
<FlatList
ref={(ref) => { this.flatListRef = ref; }}
data={filteredItems}
renderItem={({ item }) => this.renderItem(item)}
numColumns={2}
extraData={this.props.pagination}
keyExtractor={item => item.id}
onEndReached={this._handleMoreItems}
onEndReachedThreshold={0.001}
ListFooterComponent={this._renderFooter}
/*onScroll={event => {
this.yOffset = event.nativeEvent.contentOffset.y
}}*/
scrollEventThrottle={2}
onMomentumScrollEnd={e => this.scroll(e.nativeEvent.contentOffset)}
/>
<TouchableOpacity onPress={()=> this.goToTop()} style={{ position: 'absolute', width: 50, height: 50, alignItems: 'center', justifyContent: 'center', right: 1, bottom: 40}}>
<Image style={{width: '45%', height: '45%'}} source={{"up"}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=> this.gotoBottom()} style={{position: 'absolute', width: 50, height: 50, alignItems: 'center', justifyContent: 'center',right: 1, bottom: 0}}>
<Image style={{width: '45%', height: '45%'}} source={{ "down"}}/>
</TouchableOpacity>
</View>
goToTop = () => {
const indexInRange = this.state.index - itemsUpDown >= 0;
if (indexInRange) {
this.flatListRef.scrollToOffset({
offset:(this.state.index-itemsUpDown)*deviceHeight+(this.state.index-itemsUpDown)*2
});
this.setState({
index: this.state.index - itemsUpDown,
});
} else {
this.flatListRef.scrollToIndex({ index: 0 });
this.setState({
index: 0,
});
}
}
gotoBottom = () => {
const indexInRange = this.state.index + itemsUpDown <= this.props.pagination - 1;
if (indexInRange) {
this.flatListRef.scrollToOffset({
offset: (this.state.index+itemsUpDown)*deviceHeight+(this.state.index+itemsUpDown)
});
this.setState({
index: this.state.index + itemsUpDown,
});
} else {
this.flatListRef.scrollToEnd();
this.setState({
index: this.props.pagination - 1,
});
}
}
I have used scrollOffset and scrollToEnd and scrollToIndex to load the items 15 wise. After loaded all items then I need to gotoUp and down only with items need to be go up and 15 item need to go down of the screen.
My issue is offset value of goToBottom is incorrect and it always adding space and it always goes to the else part and indexRange is not known to it. So it will leads to show empty space at the end. Here is my code.