React-native-navigation: [v3][iOS] topBar component not mounted or setDefaultOptions issue?

[zabojad]

Issue Description

I'm upgrading a project from RN 0.59.10 and RNN 2.26.5 to RN 0.61.3 and RNN 3.3.0. I'm doing that with a fresh npx react-native init ... project.

On iOS, I lost my topbar component.

My app does this at startup:

Navigation.setDefaultOptions(
    {
        layout: { componentBackgroundColor: "white", backgroundColor: "white", orientation: ["portrait"]},
        popGesture: true, 
        topBar: { drawBehind: false, backButton: { visible: false, showTitle: false}, buttonColor: "black", hideOnScroll: false, title: { component: { name: "HeaderToolbar", alignment: "center"}}}, 
        sideMenu: { openGestureMode: "bezel"}, 
        animations: { setStackRoot: { enabled: true}}
    };
);

And no topbar component gets mounted on iOS (it is working on Android). I get a blank topbar.

Is anyone else experiencing the same thing?

Side question: is there any piece of documentation, changelog, etc... regarding the V3 version? It could be good to gather them all at the same place.

---

Environment

• React Native Navigation version: 3.3.0
• React Native version: 0.61.3
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iOS 12.3.1 iphone (device), debug

[guyca]

@zabojad Changes for v3 are detailed in the changelog.
Hard to say what the problem is, We're starting to upgrade the Wix app from 0.59.¯\_(ツ)_/¯ to 0.60.3 - I'll update if we encounter any TopBar issues.

In the meantime - you could try reproducing the issue in the playground app. It will help me address it as I don't see anything suspicious with your options.

[zabojad]

Hey @guyca ! Yes, I've easily reproduced this issue with the playground app. Here is the modified playground app that reproduces the issue : https://github.com/zabojad/react-native-navigation/tree/issue_5622

On Android, you'll see the topbar from the default options while on ios you won't, the default topbar option is ignored.

[zabojad]

@guyca what can be done about it? The bug is confirmed and reproduced with the modified playground app... Can you push it in the work in progress queue?

[zabojad]

Just tried with 3.5.1 and still the same issue...

[zabojad]

For more information, it also do not work when set at the stack options level:

Navigation.setRoot({
    root: {
        sideMenu: {
            left: {
                component: {
                    id: IDs.DRAWER,
                    name: MyAppSideMenu,
                }
            },
            center: {
                stack: {
                    id: IDs.MGX_STACK,
                    children: [{
                        component: {
                            name: MyAppHome,
                        },  
                    }],
                    options: {
                        topBar: {
                            drawBehind: false,
                            backButton: {
                                visible: false,
                                showTitle: false,
                            },
                            buttonColor: "black",
                            hideOnScroll: false,
                            title: {
                                component: {
                                    name: MyAppHeaderToolbar,
                                    alignment: Center,
                                }
                            },
                        }
                    }
                }
            },
        },
    }
});

It works when set at component level:

Navigation.setRoot({
    root: {
        sideMenu: {
            left: {
                component: {
                    id: IDs.DRAWER,
                    name: MyAppSideMenu,
                }
            },
            center: {
                stack: {
                    id: IDs.MGX_STACK,
                    children: [{
                        component: {
                            name: MyAppHome,
                            options: {
                                topBar: {
                                    drawBehind: false,
                                    backButton: {
                                        visible: false,
                                        showTitle: false,
                                    },
                                    buttonColor: "black",
                                    hideOnScroll: false,
                                    title: {
                                        component: {
                                            name: MyAppHeaderToolbar,
                                            alignment: Center,
                                        }
                                    },
                                }
                            }
                        },  
                    }],
                }
            },
        },
    }
});

[zabojad]

@guyca @yogevbd Guys, what could I do to help you move forward on this issue given that we already know this :

• issue is reproduced with playground app => https://github.com/zabojad/react-native-navigation/tree/issue_5622

• issue seems to be that topBar options are ignored when set at default options level or at stack options level.

• topBar options are however not ignored when set at component options level...

all that happening only on iOS.

[zabojad]

I'm sorry to be a bit too repetitive here but this issue is a big annoyance as it makes our code quite dirty to workaround. What can I do more here to help you guys solve it?

[johnckendall]

I'm currently having this behavior in release 6.9.1. Just following the example here https://wix.github.io/react-native-navigation/docs/basic-navigation and setting the "App Theme" in this way isn't to working

[nerdfooprogrammer]

I'm currently having this behavior in release 6.9.1. Just following the example here https://wix.github.io/react-native-navigation/docs/basic-navigation and setting the "App Theme" in this way isn't to working

me too, my RNN version is 6.10.1