REGISTER

Android Drawer & StatusBar done right for React Native

Ferran Negre
2017-03-24

blog content

Need help with React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

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

Summary

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!

Author:
Ferran Negre
arrow icon
MORE posts from this author

learn more

More posts from this category

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.