Dynamic data loading

[ashikExperion]

I have tried to render 100+ items with pagination
first i have rendered 20 items
then using pagination i have fetched 20 again
But there comes empty grids
how can i over come this i already seen a response of how to list 100+ items question
but here i am not trying to render 100 at a time.

[MatiPl01]

Can you share your code showing what you are trying to do?

But there comes empty grids

What do you exactly mean?

[ashikExperion]

there is empty grids in the image it comes when i fetch the data again

[ashikExperion]

import React from 'react';
import { View, StyleSheet } from 'react-native';
// import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';
import Animated, { useAnimatedRef } from 'react-native-reanimated';
import { isTablet } from 'react-native-device-info';

export default function Grid({ data, renderItem, handleEndReached }) {
  console.log('data -----', data);
  const scrollableRef = useAnimatedRef<Animated.ScrollView>();
  const handleScroll = (event) => {
    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;

    // Define a threshold (e.g., 50 pixels from the bottom)
    // You can adjust this value based on how early you want to trigger the load
    const scrollThreshold = 5;

    // Check if the sum of visible height and current scroll position
    // is greater than or equal to the total content height minus the threshold.
    const isCloseToBottom =
      layoutMeasurement.height + contentOffset.y >=
      contentSize.height - scrollThreshold;

    // Now, you can use 'isCloseToBottom' in your logic:
    if (isCloseToBottom) {
      // console.log('Scroll has reached near the bottom!');
      handleEndReached();
      // Trigger your load more function here,
      // e.g., fetchMoreData();
    }
  };

  return (
    <View style={styles.container}>
      <Animated.ScrollView
        ref={scrollableRef}
        showsVerticalScrollIndicator={false}
        onScroll={handleScroll}
        // scrollEventThrottle={16}
      >
        <Sortable.Grid
          columns={isTablet() ? 3 : 1}
          data={data} // Pass your data here
          renderItem={renderItem}
          rowGap={10}
          columnGap={10}
          autoScrollEnabled={true}
          scrollableRef={scrollableRef}
          autoScrollActivationOffset={75}
          // onScroll={handleScroll}
          // scrollEventThrottle={16}
          customHandle
          // onDragStart={() => {
          //   console.log('--- SORTABLE.GRID DRAG BEGINNING! (Problem Page) ---'); // ADD THIS LINE
          // }}
          // onDragEnd={(data) => {
          //   console.log('drag ended---', data);
          // }}
          // customHandle
        />
      </Animated.ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

[ashikExperion]

handleEndReached()
this function calls api that gives next 20 items
it is a type of pagination

[MatiPl01]

I have an example in the example app that tests similar case, when new data is added to the data array, and everything seems to work fine (I tested on Android and iOS).

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-06-19.at.16.54.03.mp4

Would you be able to prepare a reproduction repository with this code or give me the source code of the complete reproduction that I would be able to copy and paste to test it locally on my side?

Can you also give me more details:

• on which platforms the issue happens (iOS/Android, mobile/tablet/web), where you noticed the problem>
• which version of react-native, react-native-reanimated, react-native-sortables do you use?
• is it the New or the Old Architecture?
• is it bare or expo go workflow?

[ashikExperion]

i have doubt like is this library have any rendering issue when we give data of 40 to 80 items

[MatiPl01]

Mhm, it's hard to say. I haven't noticed any problems when I was testing it but maybe there is something going on. It is hard to judge without being able to reproduce the issue on my end.