- Read Tutorial
- Watch Guide Video
Before we move on to our forum, I want to take a quick aside and show you how you can update the status bar color. You may or may not have noticed that when we apply to our background, our dark background up here at the top, you can barely see the time, the battery life, and different things like that. That's not really a great user experience or user interface for your users. So in this guide, I'm going to show you how you can update that.
You want to open up your app component, this is the main component that's the root of the application, and then we're going to add a dependency here. So I'm going to say import and then in curly brackets, status bar from React dash Native. Now what we're going to do is inside of the current user provider right above where it says app container. We're going to make a call to this status bar component.
All of this is in the React Native status bar documentation if you want to learn a little bit more about it. So I'm going to call status bar, and then the prop that we're going to pass to it is bar style as you can see, we have some autocomplete there, and that's going to take any string, and the three options we have are dark content, default and light content. You want to use dark content to have the status bar colored black.
If you want to have it be white, you'll use light content, and then if you go and look at the documentation, you can see that you can actually use any color that you want for this. You can apply your own custom styles, I definitely recommend for you look at that documentation.
I'm going to pick for our application light content and then I'm just going to close off the status bar component. Hit save, and now you can see that we have access to our time, our battery life, and the carrier and wifi connection.
[Capture #1 [2:03]]
So that looks much better, and it's a much better user experience if you're building an application. You do not want to deploy that and have the status bar either barely be seen or not seen at all. So nice job if you went through that. You now know how to customize the status bar color and style in React Native.