No Comments Yet
Be the first to share your thoughts and start the conversation.
Hide StatusBar
Loading...
Be the first to share your thoughts and start the conversation.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this lesson, we learn how to hide the status bar in a React Native mobile application to create a cleaner user interface. Hiding the time and battery percentage from the view improves the visual appeal of the app, especially when dealing with varying poster themes.
app_layout file, specifically the primary layout instead of the tabs layout.00:00:02 Oh, and now that everything is looking so good, we might as well make it a real mobile app by hiding the time and the battery percentage.
00:00:10 No need to show it here within our movie app.
00:00:12 And even though having it here is totally fine, having it within our movie details page, which we will code next, is not ideal.
00:00:19 Because if the poster is very light or very dark, depending on your theme, these numbers will not be visible at all, and they would just clutter the poster image.
00:00:29 So, to hide them, you can head over into our app underscore layout.
00:00:34 It is this layout right here, the primary one, not the tabs one.
00:00:38 And right below the stack, you can see status bar, import from React Native, and simply give it a hidden property.
00:00:46 set to true.
00:00:48 If you save it and open up your terminal, you'll see that the layout children must be of type screen, and all other children are ignored.
00:00:56 That's why this status bar is not taking effect.
00:00:59 So what you have to do instead is wrap everything with an empty React fragment, just like this, and then right next to the stack,
00:01:10 or on top of it in other words, you can save it, and there we go, it gets hidden away.
00:01:15 immediately the app looks so much cleaner as the time and battery are not impacting our view.
00:01:21 Looking great.
00:01:22 And all of these are just fundamentals of React Native.
00:01:26 Everything from flat lists, to layouts, to knowing how to hide the status bar if you need to.
00:01:31 But this is just the beginning.
00:01:33 There's always more to learn, bigger projects to build, and exciting things to ship to production.
00:01:38 So if you want to apply some of the knowledge you've gotten today to practical production level, check out JS Mastery Pro,
00:01:45 where I dive deeper into JavaScript, React, React Native, Next.js and more.
00:01:50 And the best part is that it is a subscription-based model, which means that it is more accessible to get started and you can always learn something new
00:01:58 every month.
00:01:59 So I'll see you in there as it is the new biggest chapter of JavaScript Mastery.
00:02:04 But with that said, I do want to give you a glimpse of the kind of optimizations that we do on the production level.
00:02:12 So in the next lesson, I'll show you one big mistake that we've made in our homepage.
00:02:17 Yep, it is hidden right here within this file, but understanding it requires reading a lot of docs and fixing it.
00:02:24 Well, I'll show you how to do it in the next lesson.