How to load more than 1000 items in a Flat list

Here this is My Code

import React,{ Component } from ‘react’;
import {ScrollView, TouchableOpacity,StyleSheet, Text,View,TextInput,Button,Image,ImageBackground,Dimensions,AsyncStorage,NetInfo,StatusBar,ActivityIndicator,FlatList,ProgressBarAndroid,TouchableHighlight} from ‘react-native’;
import {createStackNavigator, createAppContainer,StackNavigator} from ‘react-navigation’;
import { Col, Grid, Row } from ‘react-native-easy-grid’;
import { Divider } from ‘react-native-elements’;
import axios from ‘axios’;
import {Card,CardItem} from ‘native-base’;
import strings from ‘./res/strings’
import color from ‘./res/colors’
const screenWidth = Math.round(Dimensions.get(‘window’).width);
const screenHeight = Math.round(Dimensions.get(‘window’).height);

const ip=strings.values.commonvalues.ip;
const tokken=strings.values.commonvalues.tokken;

const blue=color.values.Colors.blue;
const colorprimary=color.values.Colors.colorPrimary;
const white=color.values.Colors.white;

export default class TaskList extends React.Component {
static navigationOptions = {
title: “Task List”,
color:“#fff”,
headerStyle: {
backgroundColor:colorprimary,
},
headerTintColor: white,
headerTitleStyle: {
fontWeight: ‘bold’,
},
};
constructor(props) {
super(props);
this.state = {
isLoading: false,
dataSource:‘’,
pid:‘’,UserID:‘’,pdesc:‘’,cid:‘’,cname:‘’,
};
}

gettaskdetails=(index)=>{

const id=index

const {TaskID,TagIDNo}=this.state.dataSource[id]

this.props.navigation.navigate(‘TaskDetailsActivity’,{
TID:TaskID,
TagID:TagIDNo,
PID:this.state.pid,
UserID:this.state.UserID,
PDesc:this.state.pdesc,
CusID:this.state.cid,
CusName:this.state.cname
});

}

gettasklist=()=>{
const config = {
headers: {
‘currentToken’: tokken,
},
params: {
pid:this.state.pid,//823
}

};

this.setState({isLoading:true})
axios.get(ip+‘/getTaskList’, config)
.then(response => this.setState({ dataSource:response.data},() => {if(response.status==200){this.setState({isLoading:false})}}))
.catch(err => console.log(err));
}

componentDidMount(){
this.setState({
pid:this.props.navigation.getParam(‘PID’, ‘’),
cid:this.props.navigation.getParam(‘CusID’, ‘’),
pdesc:this.props.navigation.getParam(‘PDesc’, ‘’),
cname:this.props.navigation.getParam(‘CusName’, ‘’),
UserID:this.props.navigation.getParam(‘UserID’, ‘’)
},()=>{this.gettasklist();})
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1,
justifyContent: ‘center’,
flexDirection: ‘column’ }}>


)
}
return (




{this.state.pid+“-”+this.state.pdesc}


<Divider style={{ backgroundColor:white}} />
<Divider style={{ backgroundColor:white}} />


{this.state.cid+“-”+this.state.cname}


<FlatList
   data={ this.state.dataSource }
   initialNumToRender={this.state.dataSource.length}
   renderItem={({item,index}) =>  
   <Card>
        <CardItem style={{alignItems:"flex-start",width:'100%',flexWrap:'wrap'}}>
        <Grid  onPress={() => this.gettaskdetails(index)}>
        <Row>
          <Col style={{alignItems:'flex-start',width:'20%'}}>
          <Text style={{fontSize:12,color:colorprimary}}>Tag ID-</Text>
          </Col> 
          <Col style={{alignItems:'flex-start',width:'30%'}}>
          <Text style={{fontSize:12}}>{item.TagIDNo}</Text>
          </Col> 
          <Col style={{alignItems:'flex-start',width:'20%'}}>
          <Text style={{fontSize:12,color:colorprimary}}>Task ID-</Text>
          </Col> 
          <Col style={{alignItems:'flex-start',width:'30%'}}>
          <Text style={{fontSize:12}}>{item.TaskID}</Text>
          </Col> 
         </Row>
        <Row>
          <Col style={{alignItems:'flex-start'}}>
          <Text style={{fontSize:12}}>{item.TaskDesc}</Text>
          </Col> 
        </Row>
        </Grid>  
         </CardItem>
       </Card>
    }

   keyExtractor={(item, index) => index.toString()}
   
  />

      </ScrollView>
    )
  }

};
const styles = StyleSheet.create({
titleText: {
flex:1,
flexWrap:‘wrap’,
color:white,
fontSize:12,
padding:5
},
});

Hi. Please edit your post to format your code as code (e.g. as follows) because otherwise it’s unnecessarily difficult to work with:

```
code
here
```

Or better yet, post this as a snack and put a link to the snack in your post.

Articles like this one or stackoverflow answers like this one might give you some ideas on how to solve your problem, though.

ThankYou