How to properly implement the statusbar in the components using React Native

Question

I have task where I need to change the statusbar from white and make the content dark. Now I search how the statusbar implement to the component. Yes it works properly. Later on I experience bugs where If I re render the entire application I mean when I re open the application again. the status bar that I change it turns to the original color which is blue. so to make more details I will show you the code that I implement and the screenshot of my application that I created.

Here is some research that I read: Reference

I don't think there is any conflict between react-navigation and the StatusBar, but I think you should use the component rather than the imperative API. There's a high chance this is due to a re-render of your app and it just switch back to the default, with a component declare, you ensure it won't happen.

Goal: To make the statusbar won't change to blue if I re open the application again.

Here is what I implement on my application:

React Navigation 5 (For Navigation)
Native Base

Statusbar:

 <StatusBar hidden={false} animated  barStyle="dark-content" backgroundColor="#FFFF" />

Bug Status Bar:

Goal Status Bar:

Yes sure, I implement the status bar in the different screens I have. so on my example I implement it on my dashboard screen — DevGe, Feb 09 '21 at 08:07
You can use async storage to store the user theme preference and when the app loads, you can get values from async storage and set it directly on the status bar based on lets say - "lightMode" or "darkMode" — Appy Mango, Feb 09 '21 at 08:17
@DevGe Make sure you are adding the StatusBar Component on top of the render method. and this is working in my case.. — Jignesh Mayani, Feb 09 '21 at 08:21
@Jigneshmayani can you please have example, how will this implement. — DevGe, Feb 09 '21 at 08:31

score 0 · Answer 1 · answered Feb 09 '21 at 08:36

0

Code Works might only for the android device as we have to manage the safeAreaView in iOS device

Check out the below code example to show the custom status bar color.

<View style={{ flex: 1 }} >
  <StatusBar animated backgroundColor="pink" barStyle="dark-content" />
  <View style={{ flex: 1, backgroundColor: "green" }} >

  </View>
</View>

Might you will be able to see the status bar color pink and dark content into it and whole screen with green color.

answered Feb 09 '21 at 08:36

Jignesh Mayani

6,937
1
20
36

Here is what example i have.

– DevGe Feb 09 '21 at 09:59
I tried your sample code. the statusbar still changing to blue. – DevGe Feb 09 '21 at 10:00
try

– Jignesh Mayani Feb 09 '21 at 10:02
still same.. bugs. the statusbar color right now is blue. – DevGe Feb 09 '21 at 10:04
@DevGe you must have another issue please try to figure out the issue by debugging your app as I provided the code after tried on my own. – Jignesh Mayani Feb 09 '21 at 10:12
hi, I already found out where the problem came from. when i remove my custom drawer the statusbar work properly, however when insert my custom drawer again. the bug happens. – DevGe Feb 09 '21 at 16:28
Exactly, as I told you the issue must be caused by some other problem. – Jignesh Mayani Feb 10 '21 at 04:45

How to properly implement the statusbar in the components using React Native

1 Answers1