[V2] [iOS] Permit showOverlay to not impact statusBarStyle

[pribeh]

showOverlay is really useful for creating card and notification type UI elements that don't necessarily cover the statusbar. Currently, showOverlay always impacts the statusBarStyle of the underlying screen regardless of whether it is defined. This can be demonstrated by calling showOverlay overtop screens with different statusbarStyles. The statusBarStyle should probably not be set by default or a 'null' value should be optional.

[pribeh]

Anyone have any pointers where I could start looking to disable statusbar selection on overlays?

[guyca]

I think passing null is preferred to disabling StatusBar color all together for Overlays. That might require small changes to OptionsProcessor.processColor, not sure how it currently handles null.

[pribeh]

@guyca thanks for responding. is there a way to simply pass null for all statusbar attributes for overlays? If, on android for instance, a statusbar is set to drawunder and then not across different routes/screens, overlays will override again, causing the screen layout to shift.

[guyca]

If you access RNN's publish api (push, pop etc) through a dedicated service (or swizzle Navigation.showOverlay), you can enforce any style properties you want.

[pribeh]

The issue is when you display the same overlay(s) over different screens with different requirements. In our case, we define an overlay along with our root navigation which we hide and display when we need to (we use it as a custom dashboard style tabbar). It will always overrides the statusbar settings for each screen no matter what we set when pushing another screen.

export const goToHome = () => {
    Navigation.showOverlay({
        component: {
            id: 'DashboardOverlay',
            name: 'app.DashboardOverlay',
            options: {
                overlay: {
                    interceptTouchOutside: false
                },
            }
        }
    });
    Navigation.setRoot({
        root: {
.......
}

[AbanoubNassem]

I was going to post same issue, when I found yours , the showOverlay doesn't respect the current pushed screen props, did you find a way to stop it from overriding the status bar?

[pribeh]

@AbanoubNassem declaring the following on every screen is the only way we've found so far:

   componentDidAppear() {
		if (Platform.OS === 'ios') {
			Navigation.mergeOptions("DashboardOverlay", {
				statusBar: {
					style: 'light'
				}
			})
			Navigation.mergeOptions("InAppNotificationComponent", {
				statusBar: {
					style: 'light'
				}
			})
			Navigation.mergeOptions("NotificationComponent", {
				statusBar: {
					style: 'light'
				}
			})
		}
	}

[AbanoubNassem]

@AbanoubNassem declaring the following on every screen is the only way we've found so far:

   componentDidAppear() {
		if (Platform.OS === 'ios') {
			Navigation.mergeOptions("DashboardOverlay", {
				statusBar: {
					style: 'light'
				}
			})
			Navigation.mergeOptions("InAppNotificationComponent", {
				statusBar: {
					style: 'light'
				}
			})
			Navigation.mergeOptions("NotificationComponent", {
				statusBar: {
					style: 'light'
				}
			})
		}
	}

well that's super bad , since in my case it's more complex some screens has the status bar hidden etc , that will add more complexity and ugly code!

[Natteke]

This is extremely obvious overlay behavior. If screens represents as stack of cards, there's should be a way to inherit properties from previous one.

Hope there will be some way to fix that in future releases.

[ghiculescualexandru]

Is there any update on this?