Implement Bidirectional Infinite ScrellView in react-native - react-native

Question

I want to implement infinite scrollview in both the direction. Also the data should be loaded dynamically.
I am using SectionList component for list. I have implemented forward infinite scrolling. That means if user scroll down, the data will append to list automatically.
For that I have used onMomentumScrollEnd event. When user stops the scrolling, if the scroll is in Up direction, data will be appended at the End and if the scroll is in Down direction, data will be appended at the Top.
Now the problem is when I append the data at Top of list, It shift all the current list data to backward. I don't want to shift the current list even if the data is updated. Is there any way to do it.
This is my code:
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
SectionList,
} from 'react-native';
import CardComponent from './CardComponent'
export default class Schedule extends Component {
constructor(props) {
super(props);
this.state = {
sectionData: [],
loading: false,
}
this.contentOffsetY = 0;
this._onScroll = this._onScroll.bind(this)
}
componentDidMount() {
this.setState({ sectionData: this.props.data })
}
renderItem = ({item}) => (
<CardComponent
data={item}
key={item}
/>
);
renderDateSeparator(text) {
return (
<Text style={{
paddingVertical: 15,
fontSize: 14,
flex: 1,
textAlign: 'center',
textAlignVertical: 'center',
}}>
{text}
<Text>
)
}
_onScroll(e){
let contentOffset = e.nativeEvent.contentOffset.y;
this.contentOffsetY < contentOffset ? this.loadMoreOnBottom() : this.loadMoreOnTop();
this.contentOffsetY = contentOffset;
}
loadMoreOnTop() {
this.setState({ lodaing: true });
// code to append data on top of list
this.setState({ lodaing: false });
}
loadMoreOnBottom() {
// code to append data at bottom of list
}
render() {
const sectionData = this.state.sectionData;
return(
<View style={{flex: 1}}>
<SectionList
onMomentumScrollEnd={this._onScroll}
automaticallyAdjustContentInsets={false}
itemShouldUpdate={false}
renderItem={this.renderItem}
renderSectionHeader={({section}) => this.renderDateSeparator(section.date)}
sections={sectionData}
stickySectionHeadersEnabled={false}
refreshing={this.state.loading}
onRefresh={() => this.loadMoreOnTop()}
onEndReachedThreshold={0.3}
onEndReached={() => this.loadMoreOnBottom()}
keyExtractor={(item) => item.key}
/>
</View>
)
}
}
Thanks in advance.

Answer 1

After so much of research, I have finally implemented the bidirectional infinite scroll view in react-native.
For the implementation, I have replaced my SectionList with FlatList, Because I want to use scrollToOffset method which is not properly working in SectionList.
I have used setInterval function of javaScript. It regularly checks weather the list need to be append from top or bottom.
This is my code:
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
FlatList,
Dimensions,
} from 'react-native';
import CardComponent from './CardComponent'
let {height, width} = Dimensions.get('window');
export default class Schedule extends Component {
constructor(props) {
super(props);
this.state = {
listData: [],
}
this.contentOffsetY = 0;
this.pageOffsetY = 0;
this.contentHeight = 0;
this._onScroll = this._onScroll.bind(this);
this.loadMoreOnTop = this.loadMoreOnTop.bind(this);
this.loadMoreOnBottom = this.loadMoreOnBottom.bind(this);
}
componentDidMount() {
this.setState({ listData: this.props.data });
this._interval = setInterval(() => {
this.setState({ load: true });
}, 2000);
}
componentWillUnmount() {
clearInterval(this._interval);
}
renderItem = ({item}) => (
<CardComponent
data={item}
key={item}
/>
);
_onScroll(e){
let contentOffset = e.nativeEvent.contentOffset.y;
this.contentOffsetY < contentOffset ? this.loadMoreOnBottom() : this.loadMoreOnTop();
this.contentOffsetY = contentOffset;
}
scrollToOffset = (offset) => {
this.flatListRef ? this.flatListRef.scrollToOffset({animated: false, offset}) : null;
};
loadMoreOnTop() {
let newOffset;
// code to append data on top of list
// calculate newOffset:
newOffset = this.pageOffsetY + space required for new data.
this.contentOffsetY = newOffset;
this.scrollToOffset(newOffset);
}
loadMoreOnBottom() {
// code to append data at bottom of list
}
render() {
const listData = this.state.listData;
if(this.pageOffsetY < 600) {
this.loadMoreOnTop();
} else if((this.contentHeight - this.pageOffsetY) < (height * 1.5)){
this.loadMoreOnBottom();
}
return(
<View style={{flex: 1}}>
<FlatList
onScroll={(e) => {
this.pageOffsetY = e.nativeEvent.contentOffset.y;
this.contentHeight = e.nativeEvent.contentSize.height;
return null;
}}
onMomentumScrollEnd={this._onScroll}
automaticallyAdjustContentInsets={false}
itemShouldUpdate={false}
renderItem={this.renderItem}
data={listData}
refreshing={false}
onRefresh={() => this.loadMoreOnTop()}
onEndReachedThreshold={0.3}
onEndReached={() => this.loadMoreOnBottom()}
keyExtractor={(item) => item.key}
ref={(ref) => { this.flatListRef = ref; }}
animated={false}
/>
</View>
)
}
}