1

I am currently migrating my codebase from react-navigation to RNN. For the previous implementation, I have two more wrapped components under the Provider component. The architecture shows below

<Provider>
  <WebsocketManager>
     <ConnectionManager>
        <App> (render react-navigation navigator inside)
     </ConnectionManager>
  </WebsocketManager>
</Provider>

But right now if I understand and implement correctly, the new architecture of RNN should be this way

<Provider>
  <Screen 1 />
</Provider>

<Provider>
  <Screen 2 />
</Provider>

These screens share the same redux store. But what is the best way to embed my two more upper components here? Notice that I need those screen to use the same instance like singleton way. If I use HOC to wrap the Screen 1 and Screen 2..., each screen will be wrapped by new instances of managers. Some logics like open ws might run multiple times if there is no global flag to control. I am wondering if there is a RNN way to handle this condition and what the best design pattern is.

0 Answers0