StatusBar is not blurring on iOS

[fadinasr]

🐛 Bug Report

The status bar is covering and conflicting with the content of the screen. We need to blur the status bar on iOS so it appears above the content of the screen.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Added blur option to navigation default options
2. Tested with other options and on Android
3. Tried upgrading to the latest version

Expected behavior

The StatusBar should be blurred or have a background color. Background color can only be used on Android, so we need the blur feature on iOS so we overlay the status bar with a blurred background to not conflict with screen content.

Actual Behavior

Nothing is being changed on iOS when we enable the blur option

Your Environment

• React Native Navigation version: 7.8.1
• React Native version: 0.63.3
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator and Device - all versions

Reproducible Demo

Navigation.events().registerAppLaunchedListener(async () => {
  await Navigation.setDefaultOptions({
    statusBar: {
      visible: true,
      blur: true
    },
   ....
  })
}

[yogevbd]

It isn't supported by apple and it sounds like you need to use a SafeAreaView in order to avoid that UI conflict you have. Could you please attach a screenshot?

https://developer.apple.com/design/human-interface-guidelines/ios/bars/status-bars/

[fadinasr]

I disagree with that completely as Apple provides you with an option to blur the status bar right off the bat. You can find the developer guide here https://developer.apple.com/documentation/uikit/uiblureffect

Plus, the default status bar is colored with the system color (white or black) if you create a native iOS application

[yogevbd]

Oh I totally missed that. We will address this soon.

[fadinasr]

@yogevbd is that released or not yet? I've upgraded to 7.18.1 and it's still not working.