Android Drawer and StatusBar Done Right for React Native

Authors

Ferran Negre

Software Engineer

Callstack

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:

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

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
        
          />

view raw StatusBar hosted with ❤ by GitHub

You will get:

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 ^Viewwith the desired color to be our colorPrimaryDark:

  
          <StatusBar
        
            translucent
        
            backgroundColor="rgba(0, 0, 0, 0.24)"
        
            animated
        
          />
        
          { Platform.OS === 'android' && Platform.Version >= 20 ?
        
            <View
        
              style={{
        
                height: 24,
        
                backgroundColor: "#512DA8",
        
              }}
        
            />
        
            : null }
        
          <ToolbarAndroid
        
            style={{
        
              height: 56,
        
              backgroundColor: "#673AB7",
        
              elevation: 4,
        
            }}
        
            titleColor="white"
        
            title="CheeseSquare"
        
          />

view raw StatusBar-Native.js hosted with ❤ by GitHub

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 ^{<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):

This version uses bold formatting for ^react-native and ^{MainActivity.java}. You can paste it directly into Webflow. Let me know if you'd like any further modifications!

  
          @Override
        
          protected void onCreate(Bundle savedInstanceState) {
        
              if (Build.VERSION.SDK_INT >= 20) {
        
                  setTranslucent();
        
              }
        
              super.onCreate(savedInstanceState);
        
          }
        
          @TargetApi(20)
        
          private void setTranslucent() {
        
              final Activity activity = this;
        
              ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
        
              decorView.setOnApplyWindowInsetsListener(new View.OnApplyWindowInsetsListener() {
        
                  @Override
        
                  public WindowInsets onApplyWindowInsets(View v, WindowInsets insets) {
        
                      WindowInsets defaultInsets = v.onApplyWindowInsets(insets);
        
                      return defaultInsets.replaceSystemWindowInsets(
        
                              defaultInsets.getSystemWindowInsetLeft(),
        
                              0,
        
                              defaultInsets.getSystemWindowInsetRight(),
        
                              defaultInsets.getSystemWindowInsetBottom());
        
                  }
        
              });
        
          }

view raw StatusBar-Android.java hosted with ❤ by GitHub

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:

Summary

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

Need support with Android?

We help teams build and scale Android apps using React Native.

Let’s chat

Insights

Learn more about Android

View all

Sep 16Article

Debugging Android Connectivity Issues with Metro Bundler

A practical guide to fixing the "Unable to load script" error in React Native when the Android emulator can’t connect to Metro.

Dec 5Article

Optimize Your Android Application’s Size With Gradle Settings

Learn how to improve TTI, reduce memory usage and size of your Android app by adjusting Proguard rules to your projects.

Jan 22Article

Writing a Native Module for React Native Using Kotlin

Check how to build a react-native-youtube-player, a Native UI component that allows playing YouTube videos in our React Native app.

Mar 19Tutorial

The Hard Way vs. The React Native AI SDK Way: Stop Writing Custom Modules for Every Model

Learn how React Native AI uses a unified provider model to switch between cloud and on-device LLMs without rewriting application logic, enabling reliable AI experiences online and offline.

Mar 12Tutorial

Build Smarter Apps: Tool Calling & AI Orchestration Explained

Learn how on-device models in React Native can call tools, interact with external APIs, and return structured outputs you can use directly in application logic.

Mar 5Tutorial

MLC LLM + React Native: On-Device AI Without the Pain

Learn how to run third-party on-device LLMs in React Native using MLC LLM. Choose your models, run them efficiently across platforms, and keep a unified JavaScript API with React Native AI.

Feb 24Tutorial

Intelligent Fallbacks with Apple Intelligence in React Native

Learn how to use Apple’s built-in Foundation Models in React Native apps, reduce memory usage, and enable fast, fully on-device AI with React Native AI Apple.

Feb 10Tutorial

What Is the React Native AI SDK? A Complete Intro & Quickstart

Learn why on-device AI matters for React Native apps, how local LLMs behave offline, and what problems React Native AI is designed to solve from day one.

Jan 29Tutorial

Implementing an Android TurboModule with Kotlin

Learn how to implement a React Native TurboModule on Android, from the TypeScript spec and Codegen to the Kotlin implementation and package registration.

Jan 19Tutorial

Working with Different Threads in Swift TurboModules

Learn how JavaScript, native module, background, and main threads interact in React Native TurboModules, and how to use GCD queues to run async work safely in Swift.

Jan 9Tutorial

How to Add Type-Safe Constants to Swift TurboModules

Learn how to expose typed, immutable constants from a Swift TurboModule using Codegen, and get full end-to-end type safety between native and JavaScript.

Dec 30Tutorial

Adding Event Emitters to Your TurboModule in Swift

Learn how to emit native events from a Swift TurboModule and subscribe to them in JavaScript, including proper memory management and Codegen integration.

Dec 22Tutorial

Writing Your First TurboModule in Swift

Learn how to build a fully working TurboModule in Swift, integrate it with Codegen, and bridge it through Objective‑C inside an Expo app.

	import { StatusBar } from 'react-native';

	<StatusBar
	translucent
	backgroundColor="rgba(0, 0, 0, 0.20)"
	animated
	/>

	<StatusBar
	translucent
	backgroundColor="rgba(0, 0, 0, 0.24)"
	animated
	/>
	{ Platform.OS === 'android' && Platform.Version >= 20 ?
	<View
	style={{
	height: 24,
	backgroundColor: "#512DA8",
	}}
	/>
	: null }
	<ToolbarAndroid
	style={{
	height: 56,
	backgroundColor: "#673AB7",
	elevation: 4,
	}}
	titleColor="white"
	title="CheeseSquare"
	/>

	@Override
	protected void onCreate(Bundle savedInstanceState) {
	if (Build.VERSION.SDK_INT >= 20) {
	setTranslucent();
	}
	super.onCreate(savedInstanceState);
	}

	@TargetApi(20)
	private void setTranslucent() {
	final Activity activity = this;
	ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
	decorView.setOnApplyWindowInsetsListener(new View.OnApplyWindowInsetsListener() {
	@Override
	public WindowInsets onApplyWindowInsets(View v, WindowInsets insets) {
	WindowInsets defaultInsets = v.onApplyWindowInsets(insets);
	return defaultInsets.replaceSystemWindowInsets(
	defaultInsets.getSystemWindowInsetLeft(),
	0,
	defaultInsets.getSystemWindowInsetRight(),
	defaultInsets.getSystemWindowInsetBottom());
	}
	});
	}

Android Drawer & StatusBar

Pitfalls of using StatusBar and how to avoid them

Summary

Ship priority features with React and React Native experts.

React Native Development

React Development

Next.js Development

Expo Development

Node.js Development

C++ Development

Module Federation Development

On-Device AI

Feature UX/UI Design

Cross-Platform Design Systems