Changing status bar colour in React Native

Question

In React Native, I'm trying to set the status bar to 'light-content' so it is more visible against the darker background. To do so I used , however when I ran the code I got the following error:

---

RCTStatusBarManager module requires that the                 UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO
-[RCTStatusBarManager setStyle:animated:]
    RCTStatusBarManager.mm:157
__invoking___
-[NSInvocation invoke]
-[NSInvocation invokeWithTarget:]
-[RCTModuleMethod invokeWithBridge:module:arguments:]
facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&)
facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const
invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start
0x0

---

I went into the info.plist page and set UIViewControllerBasedStatusBarAppearance to false as per the error message but that still didn't do anything.

Answer 1

on iOS, you can only change the theme of StatusBar via https://reactnative.dev/docs/statusbar#barstyle

on Android, you can use backgroundColor props https://reactnative.dev/docs/statusbar#backgroundcolor-android