I have an actionList.js file that have over 100 actions. I importing the action list from a different file The problem that I have is some times my Flatlist will load and show all the items from the actionList and sometimes it only show just a few. Sometimes it will only show 10 of the actions from the action list. I have to keep refreshing the app so that it will show the full list

//ActionList.js

const ActionList = [
    {
      title: 'Folder',
      icon: 'folder',
      action: 'folder',
    },
    {
      title: 'Record',
      icon: 'record',
      action: 'Record',
    },
    {
      title: 'Pause',
      icon: 'pause',
      action: 'pause',
    }
 .... a hundred more items
]

// show.js

const [data, setData] = useState([]);

  useEffect(() => {
    ActionListService.getList()
      .then((results) => {
        setData(results);
        setFullData(results);
      })
      .catch((err) => {});
  }, []);

  <View
        style={{paddingLeft: insets.left, paddingRight: insets.right, flex: 1}}>
        <FlatList
          data={data}
          numColumns={screen.orientation === 'Portrait' ? 1 : 3}
          key={screen.orientation === 'Portrait' ? 1 : 3}
          keyExtractor={(item) => item.title}
          renderItem={({item}) => (
            <List.Item
              onPress={() => createAction(item.action)}
              // eslint-disable-next-line react-native/no-inline-styles
              style={{
                width: screen.orientation === 'Portrait' ? '100%' : '30%',
              }}
              title={item.title}
              left={() => <List.Icon icon={item.icon} />}
            />
          )}
        />
      </View>

CodePudding user response：

You should use the onEndReached attribute of Flatlist and pass a function where you load more items per scroll.

const [dataSlice, setDataSlice] = useState<object[]>([]);
  const [pageNumber, setPageNumber] = useState<number>(0);

// Code for loading only the first 10 and then each time user scrolls 10 more...
  const loadMore = () => {
    const ITEMS_PER_PAGE = 10; // what is the batch size you want to load.
    setPageNumber((prev) => prev   1);
    const start = pageNumber * ITEMS_PER_PAGE;
    const end = (pageNumber   1) * ITEMS_PER_PAGE - 1;

    const newData = data && data.slice(start, end); // here, we will receive next batch of the items
    setDataSlice([...dataSlice, ...newData]); // here we are appending new batch to existing batch
  };


<FlatList
          data={data}
          numColumns={screen.orientation === 'Portrait' ? 1 : 3}
          key={screen.orientation === 'Portrait' ? 1 : 3}
          keyExtractor={(item) => item.title}
          renderItem={({item}) => (
            <List.Item
              onPress={() => createAction(item.action)}
              // eslint-disable-next-line react-native/no-inline-styles
              style={{
                width: screen.orientation === 'Portrait' ? '100%' : '30%',
              }}
              title={item.title}
              left={() => <List.Icon icon={item.icon} />}
            />
          )}
           onEndReached={loadMore} // THIS HERE !
        />

CodePudding user response：

if you are using an static file to feed your FlatList and sometimes it doesn't show up , the problem can be related to the performance according to the device and size of the file you are trying to load.

as an offer for lists which need to have a better performance these packages can be used instead of FlatList! :

• recyclerlistview
• recyclerlistview-gridlayoutprovider
• @gifyourgame/recyclerlistview

my recommendation is the first one!