React native FlatList onEndReached() trigered automaticly-CodePudding

I am working on a react native project I got a problem on loading more data using

When I set height of parent component 500 as my code show, then scroll function is abnormal. I can not scroll up and down freely with leftmouse in simulator or finger in real phone, the window of scrollview is limitted to 500

When I do not set height of parent component or set height 100%, then I can scroll up and down without no limitation, but onEndReached() trigered automaticly every sec as my code. actually, I do not scroll at all

It is my code

     data = [{ID: '1', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: '-10', STATUS: '0'}, 
                {ID: '2', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '0'},
                {ID: '3', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '4', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '5', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '6', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '7', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '8', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '9', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'},
                {ID: '10', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: ' 100.00', STATUS: '1'}            
                ]


    _renderItem = (item) => {
        let { ID, TITLE, DATE, VALUE, STATUS } = item.item
        return (
            <View key={ID} style={{backgroundColor: 'white',alignItems:'center', justifyContent:'center',marginBottom: 1, height: (widthScroll / widthConst) * 138}}>
        <TouchableOpacity 
            activeOpacity={1}
            style={{width:  (widthScroll / widthConst) * 700}}
        >
            <View style={{}}> 
                <View style={{}}>
                    <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
                        <Text style={{fontSize: (widthScroll / widthConst) * 32, color: '#333333'}}>{TITLE}</Text>
                        <Text style={{fontSize: (widthScroll / widthConst) * 40, color: '#333333'}}>{VALUE}</Text>
                    </View>
                    <View style={{flexDirection: 'row', justifyContent: 'space-between', marginTop:  (widthScroll / widthConst) * 3}}>
                        <Text style={{fontSize: (widthScroll / widthConst) * 28, color: '#888888'}}>{DATE}</Text>
                        <Text style={{fontSize: (widthScroll / widthConst) * 28, color: '#888888')}}>{STATUS}</Text>
                    </View>
                </View>
            </View>
        </TouchableOpacity>
    </View>
        );
    }




    _onLoadMore = () => {
        this.timer1 = setTimeout(()=>{
            let dataExtra = [{ID: '11', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: this.state.count, STATUS: '0'}]
            let data = this.state.data.concat(dataExtra);
            this.setState({data:data, count: this.state.count   1});
        }, 1000);
    }

    render(){

        return(
            <View style={{flex:1, height: 500}}>
                <View style={{height: '100%'}}>
                    <FlatList
                    ref={(c)=>this.flatList=c}
                    style={{flex:1}}
                    renderItem={this._renderItem}
                    data={this.state.data}
                    onEndReachedThreshold={0.01}
                    onEndReached={() => this._onLoadMore()}
            />    
                </View>
                
            </View>
            
        );
    }

CodePudding user response：

try this

onEndReached={() => data.length >= pageSize && this._onLoadMore()}    


 _onLoadMore = () => {
        this.timer1 = setTimeout(()=>{
            let dataExtra = [{ID: '11', TITLE: 'sold', DATE: '2019-05-23 12:13', VALUE: this.state.count, STATUS: '0'}]
            let data = this.state.data.concat(dataExtra);
            this.setState({data:data, pageSize:this.state.pageSize   10, count: this.state.count   1});
        }, 1000);
    }

CodePudding user response：

try this code.....

onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
if(distanceFromEnd >= 0) {
     //Call pagination function
}
}}

Alternatively

onMomentumScrollEnd rather than onEndReached, like this:

  onMomentumScrollEnd={() => { // fetchData}}

It might not be written as the available prop in the react-native documentation, but if you will see the source code for FlatList, it uses Virtualized List which in return has the mentioned prop available.