DeviceStatusBar blur effect view position

hkan commented 6 years ago

Issue Description

I don't like using iOS's default navigation bar so I implement my own in JavaScript. This means I put objects behind the status bar. Current implementation for status bar's blur option causes the UIVisualEffectView¹ to render behind (or in web terms, get a lower z-index than) my custom contents.

I tweaked a little bit with the file and came to the conclusion that changing [viewController.view insertSubview:blur atIndex:0] to [viewController.view addSubview:blur] solves the issue for me, though I'm not sure if this would be a fail proof method. Also, Android might need a similar treatment as well.

¹ The aforementioned UIVisualEffectView is defined at RCCViewController.m:478 and inserted into the stack at RCCViewController.m:481.

Steps to Reproduce / Code Snippets / Screenshots

Adding those attributes to navigation appStyle object and filling the screen with a colored box should be enough.

{
    navBarHidden: true,
    statusBarBlur: true,
    drawUnderTabBar: true,
}

Environment

React Native Navigation version: 1.1.451
React Native version: 0.55.3
Platform(s) (iOS, Android, or both?): iOS
Device info (Simulator/Device? OS version? Debug/Release?): Device iPhone 5 iOS 10.3.2 (14F89) Debug (assuming you're asking the XCode's build configuration.)

stale[bot] commented 6 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

stale[bot] commented 6 years ago

The issue has been closed for inactivity.

wix / react-native-navigation