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.