How to implement load more functionality in refinement list in react native

Basically, I have 2 refinement list on a single page in the react-native mobile app(1st list on top and 2nd below 1st list). so it’s mobile app screen I want to initially show 8 results for both refinement list so a user can see both lists without scrolling page. I am able to achieve this by adding limit = 8. But for loading rest of result, I want to show showMore button at end of each refinement list and it should load all the rest of the item for that refinement list.

I am having an issue in figuring out how can I render showMore button and on click on that how to load rest of item in react-native with custom refinement list connector. I am only able to find that we need to pass showMore and showMoreLimit but there is no documentation there regarding providing custom render for showmore or callback function that will load more items in refinement list.

And also need information identify when all the item in refinement list had been loaded so I can hide show more.

Can any one have idea how can I do that in react-native. I am using refinementlistconnector.

Hi @devCap,

The showMore behavior is a front-end implementation only it does not involve additional requests to Algolia. Actually, it’s not possible to paginate the facets with Algolia. You can only specify how many values you want to retrieve at once.

What we do inside the widget is that we always retrieve (when showMore is enabled) the maximum number of facet with maxValuesPerFacet. When showMore is enabled we provide the value of showMoreLimit otherwise we use limit. Inside the component, we toggle the amount of item displayed (between limit & showMoreLimit) based on an internal state that keeps track of whether or not the widget is collapsed.a

Hope that helps!

@samuel.vaillant: That is a little bit clearing up and I am also planning to implement kind of the same solution in mobile app connected component.

But one more thing is not clear to me. How can I identify total facets for refinement list on algolia? Basically, I am planning to show eight facets and then showmore button. But what if I have 5 facets only for specific refinement list then I need to hide showmore button because facets are less then my limit that is 8. How can I identify that (total count of facets on alogia for specific refinement list)