React-instantsearch: [RN] Incompatibility with react-navigation

[mxmzb]

bug: using react-instantsearch-native with react-navigation and not having all the connected instantsearch widgets direct children of InstantSearch component.

Bug: What is the current behavior?

i cannot put the search box (wrapped by connectSearchBox() hoc) into a custom header component that I pass to navigationOptions.header (https://reactnavigation.org/docs/en/stack-navigator.html#header). to connect that very search box i need to wrap it somewhere above in the tree with the InstantSearch (https://community.algolia.com/react-instantsearch/Getting_started_React_native.html#add-the-%3Cinstantsearch%3E-component) component somewhere above my first react-navigation component. however, if I do this, my app stops rendering anything and gives me a blank page. clicking anywhere results in https://github.com/facebook/react-devtools/issues/1032

tldr.: InstantSearch component seems to work only if the connected react-instantsearch components are direct children of it (or maybe there must be no react-navigation components between). i am currently forced to have the code from https://community.algolia.com/react-instantsearch/Getting_started_React_native.html more or less like in the examples in one screen and can not move the search box into react-navigation navigationOptions.header prop.

Bug: What is the expected behavior?

being able to have the search box and hits list in very (not sure myself _how_ "very") different components.

Bug: What browsers are impacted? Which versions?

react-native > 0.55.0, react-navigation > 2.0.0 and react-instantsearch-native = *

Feature: What is your use case for such a feature?

Having a search box properly in the header of a screen, because having it in the screen itself causes weird visual flaws (header unmounts, white background, whatsoever)

What is the version you are using? Always use the latest one before opening a bug issue.

react-native = 0.56.0, react-navigation = 2.11.2 and react-instantsearch-native = 5.2.3

[Haroenv]

You're right, currently it's only possible to have React InstantSearch's components as a child (doesn't need to be direct) of <InstantSearch />, and if I understand it correctly, React Navigation is requiring to be the root node?

While the solution I'm going to suggest is not that great, and we should probably have a proper way of having components outside of the wrapper, that's currently not possible.

What I suggest doing is the following:

1. make a InstantSearch component in the header, as well as the search / results page
2. listen to onSearchStateChange in both and synchronise it with the searchState prop.

This way both components will act as if they're doing the same searches, so it will work.

Note that like this there will be two search operations for a single search. To avoid that you'd use a custom search client which you'd pass to both instances with the searchClient prop.

This search client can be a regular algoliasearch/lite instantiation, with a note that in the options (third argument), { _useRequestCache: true } should be present

[mxmzb]

react-navigation doesn't require to be the root node, but for some reason the search box and hits don't recognize they are inside an InstantSearch if that very InstantSearch is above the react-navigation navigator wrappers.

[samouss]

I've setup an App with React Navigation & React InstantSearch. I've added the root above the Router but it's not mandatory if your Search is only on one screen. Here is the source code of the example. If the issue persist please provide us a working example of your App, it will help a lot to better understand where the issue come from. Thanks!

[samouss]

I'm closing this issue because it's inactive since a while. Feel free to open a new one!