I'm trying to seperate a flatlist into multi page,now it look something like

But i want display seperate by pages, each page, for example display maximum 5 items, maybe something like(sorry for my bad drawing)

So i wonder, is flatlist allow me to do this ? how can i do this? of course this button will be created manual, thank you so much

CodePudding user response：

I would suggest you divide that data array into small chunks as per the requirement.

function SplitIntoChunks(arr, chunkSize) {
  let result = [];
  if (chunkSize <= 0) return result;
  for (let i = 0, len = arr.length; i < len; i  = chunkSize)
    result.push(arr.slice(i, i   chunkSize));
  return result;
}

This will divide the array as shown below. (Assuming chunkSize = 10 and totalItems = 50)

[
  [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
  [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
  [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
  [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
  [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
]

That means 5 rows with 10 items each. Now accordingly, show the data. Suppose you want to see data from index 30 to 40, show the user Row Number 3

Your Flatlist will look something like this

<FlatList
    data={MainDataArray[page]}
    keyExtractor={(item, index) => item.id.toString()}
    renderItem={RenderViewForItem}
/>

I've implemented an example for this whole process in a Snack here. You can implement something like this.

If the snack does not open, here's the source code for the implementation.

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';
import { AntDesign } from '@expo/vector-icons';

let ExampleArray = [];
let totalItemsSuppose = 50;
let eachListSize = 10;

for (let i = 0; i < totalItemsSuppose; i  ) {
  ExampleArray.push({
    id: i   1,
    name: `Item Number - ${i   1}`,
  });
}

function SplitIntoChunks(arr, chunkSize) {
  if (chunkSize <= 0) throw 'Invalid Chunk size';
  let result = [];
  for (let i = 0, len = arr.length; i < len; i  = chunkSize)
    result.push(arr.slice(i, i   chunkSize));
  return result;
}

export default function App() {
  const [page, SetPage] = useState(0);
  const [MainDataArray, SetMainDataArray] = useState([]);
  const from = page * eachListSize;
  const to = (page   1) * eachListSize;

  useEffect(
    () => SetMainDataArray(SplitIntoChunks(ExampleArray, eachListSize)),
    []
  );

  const RenderViewForItem = ({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  );

  const DecreaseRow = () => {
    if (page > 0) SetPage(page - 1);
    else SetPage(0);
  };

  const IncreaseRow = () => {
    if (page < totalItemsSuppose / eachListSize - 1) SetPage(page   1);
    else SetPage(totalItemsSuppose / eachListSize - 1);
  };

  return (
    <View style={styles.container}>
      <View style={{ flexDirection: 'row' }}>
        <AntDesign
          name="caretleft"
          size={24}
          color="black"
          onPress={DecreaseRow}
        />
        <Text>
          {`${from   1}-${Math.min(
            to,
            totalItemsSuppose
          )} of ${totalItemsSuppose}`}
        </Text>
        <AntDesign
          name="caretright"
          size={24}
          color="black"
          onPress={IncreaseRow}
        />
      </View>
      <FlatList
        data={MainDataArray[page]}
        keyExtractor={(item) => item.id.toString()}
        renderItem={RenderViewForItem}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    alignItems: 'center',
  },
});