Android Drawer and StatusBar Done Right for React Native

Android Drawer and StatusBar Done Right for React Native

In short

Brief description of the content related to Android Drawer and StatusBar implementation in React Native, enticing users to learn best practices for an improved user experience.

Setting new best pracices
Table of contents:

Most of React Native applications out there don’t really care about this matter but as an Android perfectionist I do, so let me show you how to make your drawers more beautiful following some simple steps (It took me a while to figure out them though!).

You can check all the official Material spec for the drawer, but what we are going to focus here is in the following part:

Android Drawer & StatusBar

The nav drawer spans the full height of the screen, including behind the status bar.

Thus, a drawer following this spec would look like:

the navigation drawer in Android

If you go deep down into the material intro guide, you’ll find the opacity value for the StatusBar:

StatusBar in Android

Let’s try that 20% of black. To do so, we can define the StatusBar as follows:

You will get:

new StatusBar in Android

Now, we have the drawer above the status bar giving us a nice visual effect (you can use an image as a header too). However, we need to adjust our screens as you can see at the screenshot on the right. For that, we can just make a <rte-code>View<rte-code> with the desired color to be our colorPrimaryDark:

Make sure to show the view only on Android Lollipop and above

Now it will look like as we wanted:

StatusBar in Android build with NativeJS

Pitfalls of using <StatusBar /> and how to avoid them

The main problem of using <rte-code><StatusBar translucent /><rte-code> is that it will load after the React JS context loads. So if you pay attention when opening the app, there is going to be a glitch after that loading because the status bar will become translucent and we will be moving the screen down to adjust it.

Check it out (check the button in the center):

pitfalls of using StatusBar

To fix the glitch, we can write the translucent logic natively. We can check how <rte-code>react-native<rte-code> does this and just base our solution on it (in our <rte-code>MainActivity.java<rte-code>):

The important part here is just to call our function before <rte-code>super.onCreate(savedInstanceState)<rte-code> where the actual JS context initialization will happen.

With this, the glitch will be gone when you first open the app:

gif presenting StatusBar in Android


And that’s it! I hope to start seeing more beautiful drawers above the status bar from now on!

Give this some ❤️ if you like me to continue with a series of articles based on making your React Native base app look and feel like an Android/Material application.

Happy coding!

React Galaxy City
Get our newsletter
Sign up

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.