Wrapping ThemeProvider to wix react-native-navigation V2

Question

I am trying to wrap my RNN v2 based app with react-native-elements ThemeProvider. ThemeProvider works well with same theme if wrapped around a single component but not if registered with Navigation, what I am doing wrong?

    const theme = {
  colors: {
    primary: 'pink'
  }
};
// Register screens
Screens.forEach((ScreenComponent, key) =>
  // Navigation.registerComponent(key, () => ScreenComponent, Provider)
  Navigation.registerComponent(
    key,
    () => ScreenComponent,
    () => <ThemeProvider theme={theme}>{ScreenComponent}</ThemeProvider>
  )
);

I also tried this way..

import { Platform } from 'react-native';
import { colors, ThemeProvider } from 'react-native-elements';
import React from 'react';

const theme = {
  colors: {
    primary: 'pink'
  }
};

const Provider = ({ children }) => <ThemeProvider theme={theme}>{children}</ThemeProvider>;

export default Provider;

App.js
Screens.forEach((ScreenComponent, key) =>
  Navigation.registerComponent(key, () => ScreenComponent, Provider)

Answer 1

You can wrap components with providers as follows:

Navigation.registerComponent(key, () => (props) =>
    <Provider>
      <ScreenComponent {...props} />
    </Provider>,
    () => ScreenComponent);

• First argument: registered name
• Second argument: generator function which returns the component wrapped with Provider
• Third argument: generator function which returns the actual component. This is needed as RNN needs to hoist non-react statics