Nativebase: How to use with wix react-native-navigation?

[tmaly1980]

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 ... So I can't figure out theming.

[stokesbga]

Hi amigo, glad to see youre using wix ;)

Are you asking about custom theming? Unfortunately you just need to wrap every component in the <StyleProvider> tag if you have a custom setup. I am using this nav with nativebase, and everything is good.

[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?

[shivrajkumar]

@tmaly1980 Maybe you can just use the Navigation as a variable, something like this https://github.com/GeekyAnts/NativeBase-KitchenSink/blob/master/js/App.js#L82 and warp it with Root

[shivrajkumar]

Closing this due to inactivity. Let us know if you still need any help here

[jrryhrtn]

I'm having the same problem, StyleProvider as the example above shows works, Root does not. To be more clear, it works initially after startSingleScreenApp, then push/pop all good. Then after calling resetTo('Some other display') the Root seems to get lost (the root controller is reset) and toast starts failing

[SupriyaKalghatgi]

@jrryhrtn Did you get it working?

[jrryhrtn]

Yes, I did get it working well. React-native-navigation with themes + native base components.

Jerry

On Nov 16, 2017, at 12:53 AM, Supriya Kalghatgi [e-mail] wrote:

@jrryhrtn https://github.com/jrryhrtn Did you get it working?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/GeekyAnts/NativeBase/issues/1003#issuecomment-344832439, or mute the thread https://github.com/notifications/unsubscribe-auth/AFasb4E6BfyWSvX623YzufvrcA3naDfzks5s29vNgaJpZM4OK3-D.

[awchang56]

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

[ppozniak]

Same here, my toast just won't show, despite fact my Provider has <Root>

[akhil-geekyants]

@ppozniak can you create a test repo for us to test.

[ziyafenn]

@aemdy hey, thanks for the tip. It really helps! Only problem i'm facing, is that with this solution, all the
static navigatorStyle = { }; or this.props.navigator.setStyle({}) inside the screens are being ignored.

Is there any way to fix that?

Thanks!