반응 네이티브에서 양방향 무한 ScrellView 구현

양방향으로 무한 스크롤 뷰를 구현하고 싶습니다. 또한 데이터는 동적으로로드되어야합니다.

목록에 SectionList 구성 요소를 사용하고 있습니다. 앞으로 무한 스크롤을 구현했습니다. 즉, 사용자가 아래로 스크롤하면 데이터가 목록에 자동으로 추가됩니다.

이를 위해 onMomentumScrollEnd 이벤트를 사용했습니다. 사용자가 스크롤을 중지 할 때 스크롤이 Up 방향이면 End에 데이터가 추가되고 Down 방향이면 데이터가 Top에 추가됩니다.

이제 문제는 목록 상단에 데이터를 추가 할 때 현재 모든 목록 데이터를 뒤로 이동하는 것입니다. 데이터가 업데이트 되어도 현재 목록을 이동하고 싶지 않습니다. 할 방법이 있습니까?

다음은 내 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>      )
    }
}

미리 감사합니다.