Android Drawer & StatusBar done right for React Native

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:

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

Thus, a drawer following this spec would look like:

Beautiful, isn’t it?

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

Translucent status bar, 20% Black #000000

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

import { StatusBar } from 'react-native';
<StatusBar
  translucent
  backgroundColor="rgba(0, 0, 0, 0.20)"
  animated
/>

You will get:

Using the DrawerLayoutAndroid from React Native

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 View 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:

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

The main problem of using <StatusBar translucent />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):

50% of original speed

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

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

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

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!