Algolia for React Native: refine() method

Question

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!

Answer 1

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.