QueryClientProvider usage with wix/react-native-navigation

[mkizesov]

I want to use react-query (aka TanStack / query) in react native application. In this case I need to somehow provide QueryClient to the component, but there's no single point where I can do this (like in web react application). Every navigation screen is an independent component.

RNN (wix/react-native-navigation) has React Context API for doing this https://wix.github.io/react-native-navigation/docs/third-party-react-context , but as they mention As RNN screens are not part of the same component tree, updating the values in the shared context does not trigger a re-render across all screens. However you can still use the React.Context per RNN screen component tree.

Is there any workaround or best practice on how to combine RNN and react-query to provide QueryClient to every component?

Would this re-render via react context thing break anything and in what cases?

Thanks.

[TkDodo]

you can just wrap all your individual screen components in a QueryClientProvider. As long as they use the same instance of the queryClient, data will still be shared among them.