React Native Search Page route to react-native instantsearch

I’m writing an app in react-native and my app requirement is to build an advance search form where I would specify the facet and location before searching.

The first screen contains a modal where I use algoliasearch js client to searchForFacetValues. Once the user selects a facet name, it is stored in a redux store.

I also use google place API so users can select a location and once they select it, the lat/lng is stored in a redux store.

Now, I need help to connect the second screen, which I hope I can use instantsearch by providing the value facet selected by users, and the lat / lng selected into a search result.

Can anyone help me to point out in the right direction? Is it possible to “push” the values i have in my redux store into https://community.algolia.com/react-instantsearch/guide/Search_state.html

Thanks!

Hi @wpram,

Yes it’s possible to pre-refine the search with determined values :slight_smile:

For searchParameters that are not covered by any widget like the one for the geolocation you can use the <Configure/>` widget.

For the facet, depending if it’s only one value or several you can either use a virtual <Menu/> or <RefinementList/> using the defaultRefinement prop. (Note: you could also use filters with the Algolia API syntax through configure if you prefer).

More information on those guides:

Hi @marielaure.thuret,

Thank you for your reply. If I understand correctly, there are no widget available for React-Native? So will the <Configure /> widget and <Menu> and <RefinementList /> works?

Thanks so much for your reply

Configure is a special widget (with no rendering) available on both react and react-native namespace.

Menu and RefinementList should be used as virtual widgets, using their connectors. More explanation here: https://community.algolia.com/react-instantsearch/guide/Virtual_widgets.html

It’ll look like:

const VirtualRefinementList = connectRefinementList(() => null); 

<InstantSearch>
 <Configure aroundLatLng=""/>
 <VirtualRefinementList defaultRefinement={['apple', 'banana']}/>
</InstantSearch>
1 Like