React-native-navigation: reactNativeNavigation2.default.registerContainer is not a function

[sejr]

Issue Description

When using example code in the v2 documentation, I get the following error:

Steps to Reproduce / Code Snippets / Screenshots

Follow version 2 instructions exactly as written: https://wix.github.io/react-native-navigation/v2/#/docs/installation-ios

---

Environment:
OS: macOS High Sierra 10.13.1
Node: 8.9.3
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.3 AI-162.3764568

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.50.3 => 0.50.3

package.json Dependencies

"dependencies": {
    "react": "16.0.0",
    "react-native": "0.50.3",
    "react-native-navigation": "alpha"
}

[FlaviooLima]

Original Answer:
A few version's ago it was made a modification, and now to register screens is this way:

Navigation.registerComponent("navigation.WelcomeScreen", () => App);
    Navigation.registerComponent("navigation.TextScreen", () => TextScreen);

Edited Answer:
As you can see in this link it was made a modification to the form that we initialize the application navigation system.
To be honest, I don't know why this change was made, I even put a comment to ask for more info about it.
And the reason why your code is equal to the docs but it doesn't work is because the docs are out of date.

[sejr]

@FlaviooLima Thanks for your help. But now I am getting this:

[FlaviooLima]

@sejr Can you test with version 2.0.2083?
I'm unable to test right now.
npm install --save [email protected]

[sejr]

@FlaviooLima It may have been an issue with my header search path. Testing now.

[ashleydw]

The docs are out of date, right?

I had v2 working with the container stuff, but since switching to the latest, I can no longer get topBar to render, e.g.

Navigation.setRoot({
            component: {
                name: 'someRegisteredComponent',
                passProps: { ... },
                options: {
                    topBar: {   
                        title: 'asdasd',
                        backgroundColor: '#4aa0d2',
                    }
                },
            },
        });

No error / exception, just no title.

[salilbajaj]

@sejr - Were you able to resolve this??

[ashleydw]

If anyone else has the same problem with the title bar not showing... after much debugging, I have a solution - the setRoot call must be within a stack in order for top menu bar to show. So from my previous example, it has to be be as below.

Need to update those docs!

Navigation.setRoot({
            stack: {
                children: [
                    {
                        component: {
                            name: 'someRegisteredComponent',
                            passProps: { ... },
                            options: {
                                topBar: {   
                                    title: 'asdasd',
                                    backgroundColor: '#4aa0d2',
                                }
                            },
                        },
                    },
                ],
            },
        });

[FlaviooLima]

@ashleydw Sorry to say this but you didn't need that much of debugging. :/
in the answer above I pinpoint those modifications.

As you can see in this link it was made a modification to the form that we initialize the application navigation system.

Next time read previous answer's, it can save you a lot of time :)

[ashleydw]

Two different problems. Yours resolved around component vs container which I had already figured out - I had screens showing but no title bar.

My issue was introduced in the component rewrite; I think most likely in this commit:

TopBar is not part of Component, instead it's a part of StackLayout
and shared between all components pushed to the stack Similar to iOS.

https://github.com/wix/react-native-navigation/commit/bb77b8ca4a4015b2726e2142bbd10162041b0244

[FlaviooLima]

@ashleydw true, my bad. :)
Either way, do you know why this implementation was made?
I didn't search much but I didn't find any apparent reason for this change to happen.

[yogevbd]

@FlaviooLima We refactored v2 to be homogenous and support all kinds of layouts in #2426.
Will update the documentation 😄

[joecaraccio]

@sejr Did you ever find a solution to your issue? I am still getting the undefined issue...

[sopedro]

Hi, title is a object too, so use as following:

Navigation.setRoot({ stack: { children: [ { component: { name: 'someRegisteredComponent', passProps: { ... }, options: { topBar: { title: { text: "Welcome", backgroundColor: '#4aa0d2', fontSize: 18 } } }, }, }, ], }, });