How i can limit the items in the FlatList and add load more?

Question

My skills is basic, and i'm newbie in React native, what i want to do is limit the posts in 12 and when the user scroll automatically load more posts.

My Code:

export default class Posts extends Component {
constructor(props) {
super(props);
this.state = {
  isLoading: true,};}

componentDidMount() {
   return fetch(ConfigApp.URL+'json/data_posts.php')
     .then((response) => response.json())
     .then((responseJson) => {
       this.setState({
         isLoading: false,
         dataPosts: responseJson
       }, function() {
       });
     })
     .catch((error) => {
     });}

render() {
return (
    <FlatList
      data={ this.state.dataPosts }
      numColumns={2}
      renderItem={({item}) => 
            <TouchableOpacity activeOpacity={1} style={{flex: 1}}>
            <View style={{margin: 5, marginLeft: 4}}>
            <ImageBackground source={{uri: ConfigApp.IMAGESFOLDER+item.post_image}}>
                <LinearGradient colors={['rgba(0,0,0,0.3)', 'rgba(0,0,0,0.8)']}>
                        <Text numberOfLines={2}>{item.post_title}</Text>
                </LinearGradient>
            </ImageBackground>
            </View>
            </TouchableOpacity>
}
    keyExtractor={(item, index) => index}

    />
);}}

Answer 1

If your requirement is to append the existing list from already pulled data in a chunk of 12, then you may consider following strategy which uses onEndReached and onEndThreshold to handle the scroll and add 12 records at a time.

Set current page number to 0 in constructor

constructor(props){
  super(props);
  this.state = {
    ... ,
    page: 0,
    posts: []
  }
}

Inside componentDidMount you need to pull all data from the server and store it in the local state (which you are currently doing), then call the function which will read first 12 records.

componentDidMount() {
   return fetch(ConfigApp.URL+'json/data_posts.php')
   .then((response) => response.json())
   .then((responseJson) => {
     this.setState({
       isLoading: false,
       page: 0,
       dataPosts: responseJson
     }, function() {
       // call the function to pull initial 12 records
       this.addRecords(0);
     });
   })
   .catch((error) => {
   });
}

Now add the function which will add records from this.state.dataPosts

addRecords = (page) => {
  // assuming this.state.dataPosts hold all the records
  const newRecords = []
  for(var i = page * 12, il = i + 12; i < il && i < 
    this.state.dataPosts.length; i++){
    newRecords.push(this.state.dataPosts[i]);
  }
  this.setState({
    posts: [...this.state.posts, ...newRecords]
  });
}

Now add the scroll handler

onScrollHandler = () => {
  this.setState({
    page: this.state.page + 1
  }, () => {
    this.addRecords(this.state.page);
  });
}

Render function

render() {
  return(
    ...
    <FlatList
       ...
       data={this.state.posts}
       renderItem={({item}) => ... }
       keyExtractor={(item, index) => index}
       onEndReached={this.onScrollHandler}
       onEndThreshold={0}
    />
    ...
  );
}

Hope this will help!

Answer 2

You Can add the slice(start,end) method while fetching jsondata in datasource. This trick may solve your problem.

dataPosts: responseJson.slice(0,10) replace this line with yours.