Android allows you to draw content under the navigation bar. It's a neat effect! Let's add that to our React Native apps.

Playful Programming

A walkthrough of how to draw content under the Android navigation bar and status bar in React Native apps. Covers the wrong approach using FLAG_LAYOUT_NO_LIMITS (which breaks the safe-area-context insets API), a translucent bars approach, and the correct solution using SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION with explicit transparent colors in MainActivity.java. Also addresses API level compatibility for older Android versions (pre-O for nav bar icons, pre-M for status bar icons) with semi-transparent fallbacks. Concludes by introducing the react-native-immersive-bars package that wraps all this complexity, including dark mode support.

Draw under the Android NavBar Using React Native

Other API Versions Copy link Link copied!