react-native-system-navigation-bar

React Native lets you customize the navigation bar for Android.

Hide	Lean Back	Immersive
Sticky Immersive	Low Profile	Navigation Color
Navigation Bar Divider Color	Bar Mode	Fits System Windows

Installation

yarn add react-native-system-navigation-bar

Usage

navigationHide()

Hides the navigation bar.

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.navigationHide();

navigationShow()

Shows the navigation bar.

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.navigationShow();

leanBack()

For full screen experience where the user will not interact heavily with the screen. You can browse the documentation for more information.

Type	Required	Default
boolean	No	true

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.leanBack();

immersive()

The immersive mode is intended for apps in which the user will be heavily interacting with the screen. You can browse the documentation for more information.

Type	Required	Default
boolean	No	true

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.immersive();

stickyImmersive()

In the regular immersive mode, any time a user swipes from an edge, the system takes care of revealing the system bars—your app won't even be aware that the gesture occurred. You can browse the documentation for more information.

Type	Required	Default
boolean	No	true

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.stickyImmersive();

setBarMode()

Navigation bar and status changes to bar style.

Name	Type	Required	Default
Bar Mode Style	light - dark	No
Bar Mode	status - navigation - both	No	both

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.setBarMode('light');
4SystemNavigationBar.setBarMode('dark', 'navigation');

fullScreen()

Hide or show the navigation bar and the status bar.

Type	Required	Default
boolean	No	true

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.fullScreen(true);

Note: For notched devices, add the code below to /android/app/src/main/res/values/styles.xml in your project to include the cutout for the notch.

1<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

After adding the code, the estimated content of the styles.xml file will be as follows.

1<resources>
2    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
3        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
4        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
5    </style>
6</resources>

Check out the documentation for more information about this code.

lowProfile()

The icons in the system and navigation bar are visually retracted. You can browse the documentation for more information.

Type	Required	Default
boolean	No	true

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.lowProfile();

setNavigationColor()

Changes the color of the navigation bar. It also changes the style of the status bar and navigation bar to dark or light.

Name	Type	Required	Default
Color	RGB - HSL - Color Ints	Yes
Bar Mode Style	light - dark	No
Bar Mode	status - navigation - both	No	both

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.setNavigationColor('red');
4SystemNavigationBar.setNavigationColor('translucent');
5SystemNavigationBar.setNavigationColor('#FF0000', 'light');
6SystemNavigationBar.setNavigationColor(0xff00ff00, 'dark');
7SystemNavigationBar.setNavigationColor('blue', 'dark', 'status');
8SystemNavigationBar.setNavigationColor('green', 'light', 'navigation');
9SystemNavigationBar.setNavigationColor('yellow', 'light', 'both');
10SystemNavigationBar.setNavigationColor('hsla(110, 56%, 49%, 0.5)');

getBarColor()

It allows you to access the color of the navigation bar, status bar or both bars as hex color.

Name	Type	Required	Default
Bar	status - navigation - both	No	both

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3const statusBarColor: string = await SystemNavigationBar.getBarColor('status'); // #757575
4const navigationBarColor: string = await SystemNavigationBar.getBarColor(
5  'navigation'
6); // #FF0000

If the both option is selected, the colors of both the status bar and the navigation bar will return as Object.

1import SystemNavigationBar, {
2  GetBarColorType,
3} from 'react-native-system-navigation-bar';
4
5const barColors: GetBarColorType = await SystemNavigationBar.getBarColor(
6  'both'
7);
8// { "status": "#757575", "navigation": "#FF0000" }

setFitsSystemWindows()

Boolean internal attribute to adjust view layout based on system windows such as the navigation bar. You can browse the documentation for more information.

Type	Required	Default
boolean	No	true

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.setFitsSystemWindows();
4SystemNavigationBar.setFitsSystemWindows(false);

setNavigationBarDividerColor()

Only API Level 28 (Android 9) and higher is supported.

Shows a thin line of the specified color between the navigation bar and the app content. You can browse the documentation for more information.

Name	Type	Required
Color	RGB - HSL - Color Ints	Yes

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.setNavigationBarDividerColor('red');
4SystemNavigationBar.setNavigationBarDividerColor('#FF0000');
5SystemNavigationBar.setNavigationBarDividerColor(0xff00ff00);
6SystemNavigationBar.setNavigationBarDividerColor('hsla(110, 56%, 49%, 0.5)');

setNavigationBarContrastEnforced()

Only API Level 29 (Android 10) and higher is supported.

Sets whether the system should ensure that the navigation bar has enough contrast when a fully transparent background is requested. You can browse the documentation for more information.

Type	Required	Default
boolean	No	true

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3SystemNavigationBar.setNavigationBarContrastEnforced(true);

And

All functions have callbacks.

Usage

1import SystemNavigationBar from 'react-native-system-navigation-bar';
2
3const show = async () => {
4  const result = await SystemNavigationBar.navigationShow();
5
6  console.log('Show: ', result); // true or Error Message
7};

License

MIT