I wish to use Algolia to setup InstantSearch in my React Native project. I am using this tutorial to learn the basics.
It appears in their RefinementList
and InfiniteHits
components there is a parameter: refine
. This parameter seems to play a key role in the functionality of this tutorial's app.
Where can I get an example of how this refine()
method would look like?
Please help me with some resources. An explanation of this refine()
method would also help.
Thanks!
I think there's a typo in the documentation at the time of this writing (for which I opened a pull request), and the name of the actual prop is refineNext
.
The documented InfiniteHits
example from the React Native guide uses a connector, which is a lower-level abstraction allowing users to fully control the UI. This is what allows you to use React Native code for the UI while having access to the InfiniteHits
data and logic. You can read more about the connectInfiniteHits
connector in the documentation.
The provided refineNext
function lets you load more results. It doesn't take any arguments, all you need to do is call it whenever you want to load more results from Algolia. In the example, it's being used in the onEndReached
callback of React Native's FlatList
component, whenever the hasMore
provided prop is true
. This allows loading more results once when the scroll position gets within onEndReachedThreshold
of the rendered content.