React-native-navigation: How to wrap my topmost component (App) in a Native Base Root component with v1 RNN ?

[msqar]

I'm using React-Native-Navigation v1 with Native Base. Wanted to add their ActionSheet component but as a requirement, it says i need to wrap the topmost component inside their Root component.
But i can't seem to find a way to do it, any suggestion?

The way i'm initializing the app is first registering every screen like this:

Navigation.registerComponent('app.ChatScreen', () => ChatScreen, store, Provider);

Then calling for the login:

// Start App
Navigation.startSingleScreenApp({
    screen: {
        screen: 'app.AuthView',
        title: 'Login',
        navigatorStyle: {
          navBarHidden: true
        }
    }
});

I read there was an issue kinda related to this one, where someone suggested creating a wrap function:

function wrap(Component) {
    return function () {
        return (
            <RootComponent>
                <Component />
            </RootComponent>
        );
    };
}

And then wrapping it inside the same register:
Navigation.registerComponent('app.ChatScreen', () => wrap(ChatScreen), store, Provider);

But it doesn't work, it throws: "Can't find variable React" whenever the tabBasedApp starts.

Any ideas? Thanks.

Environment

• React-Native version: 0.57.8
• Native-Base version: ^2.10.0
• Wix React-Native-Navigation: ^1.1.493 (v1)
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator iPhone X 12.1

[rawrmaan]

Hi @msqar, this simply isn't possible with react-native-navigation, as the native code controls the React root(s). I'd recommend using react-native-actionsheet, which has perfect compatibility with this library. Have a nice day!

[msqar]

@rawrmaan Yes, you're right. I ended up using react-native-actionsheet which works perfectly fine without having to wrap it up. But it was indeed possible to use <Root> from Native-Base with RNN v1 after all.

If anyone is under the same situation, here's the solution.

When in the spec says it requires to wrap the topmost component, is not necessarily the <App>, but inside the render function where you want to make use of this Toast or ActionSheet.

So, if in the render function of a component you have something like this, you can still add the Root on top of eeeevery component there and it will work like a charm :) this solution was brought by someone on Native-Base github. Kudos to him.

render () {
    return (
         <Root>
         <Container>
                // some other inner stuff
         </Container
         </Root>
    );
}

[JonathanRufino]

@msqar You just saved my day.
I was using NativeBase ActionSheet and was having problem when pushing and poping screen because the context was missing.
But adding to my render instead of my top component fixed the problem

[msqar]

@msqar You just saved my day.
I was using NativeBase ActionSheet and was having problem when pushing and poping screen because the context was missing.
But adding to my render instead of my top component fixed the problem

Glad it worked for you man :) that was the intention, to help others, although i ended up using a different library. I found that too late. But i'm happy it helped you at least!

[usmaniqbal998]

Hi just to confirm @msqar , do i have to import Root from native base like this
import {Toast, Root} from 'native-base'; and than cover my Render view inside this Root element ?