Searching outside of <InstantSearch> in React Native

Hello,

I’ve been trying to solve this problem but I have not been able to just yet. The issue is pretty much the same as the one posted in this thread:


The only small-big difference here is that I am trying to solve this in React Native.

My SearchBox component should be located in the title of the header (of React Navigation), therefore this component will be separated from Hits component. The solution Samuel Vaillant proposed in that thread is useful only for web applications since SearchBox is a web component (I must use the function connectSearchBox to wrap my own SearchBox component instead) and therefore I cannot use “defaultRefinement” property.

I would like to ask if there was any alternative to solve this issue.

Thank you very much in advance.

Hi @manu.carba96

Many solutions possible:

  1. You could use a VirtualSearchBox (or invisible searchbox, to which you would pass the value of the query as defaultRefinement)
    https://codesandbox.io/s/ais-ecommerce-demo-app-s4d99

You can learn more about VirtualWidgets here: https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react/#virtual-widgets

  1. pass your query directly to : even easier, possible with all flavours, not only React
    https://codesandbox.io/s/ais-ecommerce-demo-app-p09d3

I hope this helps.

Hello @Youcef

I have already fixed this by doing pretty much what you have already suggested me. I used an invisible SearchBox to which I passed the refinement value via Redux from the visible search bar.

Thank you very much for your support!