How to use with wix react-native-navigation?

wix’s react-native-navigation doesn’t seem to implement rendering via components but instead using native controllers. For example, we might start our navigation using:

import { Navigation } from 'react-native-navigation';

import { registerScreens } from './screens';

registerScreens(); // this is where you register all of your app's screens

// start the app
Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'One',
      screen: 'example.FirstTabScreen', // this is a registered name for a screen
      icon: require('../img/one.png'),
      selectedIcon: require('../img/one_selected.png'), // iOS only
      title: 'Screen One'
    },
    {
      label: 'Two',
      screen: 'example.SecondTabScreen',
      icon: require('../img/two.png'),
      selectedIcon: require('../img/two_selected.png'), // iOS only
      title: 'Screen Two'
    }
  ]
});

This doesn’t implement a component that I can inject inside <StyleProvider style={getTheme(material)}> … </StyleProvider> … So I can’t figure out theming.

[awchang56]

@jrryhrtn could you please share how you made your HOC with toast? I am having the same issue

[aemdy]

I’m experiencing a similar issue, but with <Root> component. Style Provider works fine.

function wrap(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      NavigationActions.setNavigator(props.navigator);
    }

    static navigatorButtons = WrappedComponent.navigatorButtons;
    static navigatorStyle = WrappedComponent.navigatorStyle;

    render() {
      return (
        <StyleProvider style={getTheme(platform)}>
          <Root>
            <WrappedComponent {...this.props}/>
          </Root>
        </StyleProvider>
      );
    }
  };
}

And then I wrap every screen I register with this function: Navigation.registerComponent('some.identifier', () => wrap(LoginScreen), store, Provider);

Styles work fine, but I’m experiencing an error with toast (the one like here https://github.com/GeekyAnts/NativeBase/issues/1016#issuecomment-313403253)

Is there any other way I could wrap my components with root?