(iOS) UIViewControllerBasedStatusBarAppearance must be NO for SingleScreenApp

[nbolender]

Issue Description

When an app is initially started using Navigator.startSingleScreenApp(), React Native displays an error if UIViewControllerBasedStatusBarAppearance (in Info.plist) is set to YES. This does not occur when using startTabBasedApp(). Setting it to YES removes the ability to control the status bar appearance through the RNN API.

Steps to Reproduce / Code Snippets / Screenshots

1. Set UIViewControllerBasedStatusBarAppearance in Info.plist to YES

2. Start a single screen app:

import { Navigation } from 'react-native-navigation';
import { registerScreens, registerComponents } from './app/screens';

registerScreens();
registerComponents();

Navigation.startSingleScreenApp({
	screen: {
		screen: 'OnboardingScreen',
		navigatorStyle: { statusBarTextColorScheme: 'dark' }
	}
});

2. Observe the following error:

RCTStatusBarManager module requires that the UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO

If I instead use startTabBasedApp() with multiple tabs, the same error does not appear.

---

Environment

• React Native Navigation version: 1.1.384
• React Native version: 0.52.2
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 6 Simulator / iOS 11.3 / Debug

[nbolender]

Closing this. A component I included was using the StatusBar component triggering this error. Not a fault of RNN, sorry!

[KManiKumarReddy]

Yeah, I have similar issue, with Picker in native-base, how did you solve that?

[dmexs]

Just a note for those using native-base with the above conflict. You can set iOS (limited colors) and Android status bar color using the Header component:

https://docs.nativebase.io/Components.html#header-def-headref
GeekyAnts/NativeBase#2940

[glocore]

I was using the StatusBar component from react-native, which was throwing this error. Deleting it solved the issue for me.

[MadaShindeInai]

Installed empty RN project. Add react-native-navigation as in guide. Got an error. Field were set to true during installation of library.
So what we should do if we need to use StatusBar component from react-native? Use another library for navigation? Any other solutions?

[39otrebla]

@MadaShindeInai you should just remove StatusBar component from default App.js implementation.

[jamesguan]

Sounds like you can get this error after the RNN installation that sets this UIViewControllerBasedStatusBarAppearance from false to true.

This is still an issue IMO. The idea that you have to choose between React Native Navigation and the StatusBar component from react-native is not ideal. Especially if this error pops up when someone does a fresh install of RNN on a new RNN project which has the StatusBar component in the example. After checking the documentation, it does say it in fine print:
COMPATIBILITY WITH STATUSBAR COMPONENT React native's [StatusBar](https://reactnative.dev/docs/statusbar#__docusaurus) component is incompatible with React Native Navigation and you should avoid using it.
https://wix.github.io/react-native-navigation/docs/style-statusBar/