How to implement pull up to load more with your boilerplate?

[lanyusan]

Hello, thanks for this great boilerplate, which helped me a lot to get started.

I am quite familiar with React but new to react native.

I have found out pull to refresh is quite easy with RN built in list view or other libraries. But I haven't found a good way to implement pull up to load more.

The built in RN list view has a reach end event but it is fired just once and in case load more fails, there is no way to trigger another reach end event.

Is there a recommended way to implement pull up to load more with your set up?

Thanks in advance.

[Yasir5247]

@lanyusan. i'm using like this with graphql. hope this helps. :)

//query
  const {loading, data, networkStatus, error, refetch, fetchMore} = useMessagesQuery({
    variables: {
      offset: 0,
      limit: 10
    },
    notifyOnNetworkStatusChange: true,
  });

  const _handleListEnd = () => {
    if (networkStatus !== NetworkStatus.fetchMore && data?.messages?.length) {
      fetchMore({
        variables: {
          offset: data?.messages?.length,
        },
      });
    }
  };

<FlashList
  data={data && data.messages?.data as Message[] || []}
  refreshing={networkStatus === 4}
  onRefresh={()=> refetch({ })}
  renderItem={({ item }: any) => renderItem({ item })}
  estimatedItemSize={300}
  onEndReached={()=> _handleListEnd()}
  ListHeaderComponent={()=> renderHeader()}
  ListFooterComponent={()=> _renderFooter()}
  showsVerticalScrollIndicator={false}
  keyExtractor={(item) => item.id.toString()}
  onEndReachedThreshold={10}
/>

[lanyusan]

@Yasir5247 Thanks for the advice.

I ended up with the old trick of scroll position to end offset, because with this user can trigger pull up at any time.

onEndReached is triggered only once and if loading data fails it would need a button for user to trigger load more.

[kanzitelli]

hey @lanyusan! This issue/question is not related to the starter, as it’s about RN itself.

In my practice, i have never used “pull up to load more” approach. i have been mostly loading more data when a user reaches the end of the list (always showing loading indicator as a list footer). In this case, the trick can be achieved by using onEndReachedThreshold, onEndReached and onMomentumScrollBegin props of a list component.

[lanyusan]

I asked here because I was wondering your screen wrapper probably had some sort of events that would be fired when entire screen was rendered but user still tried to swipe screen up.

Pull up to refresh is quite common for social media apps for example reddit, esp. when mobile network could interrupt loading more triggered by reaching end of list event. User could then pull up to load more.

I have tested with onScroll event handler to check offset to end of list, which is pretty much the same to web's pull up/scroll down further at the end of list to load more. It seems to have worked.

Feel free to close it.

Thanks.

[kanzitelli]

@lanyusan great that it worked for you! i usually show button to load more instead of loading indicator when a request fails.