react-native-navigation theming with styled-components - react-native

Question

I'm working with styled-components on my react-native project. We are using react-native-navigation to perform navigation within the application. So the question is how can I implement theme pattern from styled-components in such kind of application?
The problem is that to perform the idea of theming in terms of styled-components I have to wrap my top level component in <ThemeProvider /> like this:
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
But with react-native-navigation I don't have top level component. It has the idea of screens, so the application entry will look like this:
registerScreens(); // this is where you register all of your app's screens
// start the app
Navigation.startSingleScreenApp({
screen: { ... },
drawer: { ... },
passProps: { ... },
...
});

Answer 1

The answer was pretty simple. As react-native-navigation's registerComponent has possibility to pass redux store and Provider as a props:
Navigation.registerComponent('UNIQUE_ID', () => YourComponent, store, Provider);
We can create our custom Provider with both redux and styled-components Providers and pass this custom provider to the registerComponent like this:
import { Provider } from 'react-redux';
import { ThemeProvider } from 'styled-components';
import theme from './theme';
const Provider = ({ store, children }) => (
<Provider store={store}>
<ThemeProvider theme={theme}>
{children}
</ThemeProvider>
</Provider>
);
export default Provider;
For more details look #1920.

Answer 2

I think you can do something like this
function wrap(Component) {
return function () {
return (
<ThemeProvider theme={theme}>
<Component />
<AnotherComponent/>
</ThemeProvider>
);
};
}
function registerScreens(store, Provider) {
Navigation.registerComponent('app.SomeScreen', () => wrap(SomeScreen), store, Provider);
// more screens...
}