Can I wrap the root component created by wix/react-native-navigation in an ApolloProvider component

Question

I'm using Meteor's Apollo Client in conjunction with wix/react-native-navigation and I was wondering is it possible to wrap the root component created by Navigation.startSingleScreenApp in an ApolloProvider component? I've tried putting the Navigation.startSingleScreenApp within the render method of another component and enclosing it in ApolloProvider but that didn't work. Has anyone had any experience using these two together?

I'm wondering if each component registered with Navigation.registerComponent has its own separate root component and if that's the case I have to enclose each component I register with ApolloProvider, possibly using a higher order component? I'd appreciate any thoughts or example code anyone could provide! Thanks in advance.

Answer 1

I've gone with wrapping each registered component using a higher order component. Code I used for the HOC is below:

import React from 'react';
import appClient  from '../store/apollo';
import { ApolloProvider } from 'react-apollo';

export default function apolloProviderHOC(WrappedComponent){
  return class PP extends React.Component {
    render() {
      return (
        <ApolloProvider client={appClient}>
          <WrappedComponent {...this.props}/>
        </ApolloProvider>
      );
    }
  }
}

Just import the function above and pass the component you want to wrap into it.