➖ react-native-bars

Components to control your app status and navigation bars.

Heavily inspired by the built-in StatusBar module and react-native-transparent-status-and-navigation-bar by @MoOx (Thanks to them 💖).

Recommendations

This module will works best with:

• react-native-safe-area-context: A library to handle safe area insets and avoid drawing below status and navigation bars.
• react-native-bootsplash: A splash screen library to wait until your app finished loading.

Support

Installation

$ npm install --save react-native-bars
# --- or ---
$ yarn add react-native-bars

🆘 Manual linking

Because this package targets React Native 0.65.0+, you will probably don't need to link it manually. Otherwise if it's not the case, follow this additional instructions:

include ':react-native-bars'
project(':react-native-bars').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-bars/android')

dependencies {
  // ...
  implementation project(':react-native-bars')
}

import com.zoontek.rnbars.RNBarsPackage; // <- add the RNBarsPackage import

public class MainApplication extends Application implements ReactApplication {

  // …

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // …
    packages.add(new RNBarsPackage());
    return packages;
  }

  // …
}

Setup

Android

1. As this library only support Android 6+, first you probably have to edit your android/build.gradle file:

buildscript {
  ext {
    buildToolsVersion = "30.0.2"
    minSdkVersion = 23 // <- set at least 23
    compileSdkVersion = 31 // <- set at least 31
    targetSdkVersion = 31 // <- set at least 31

    // …

2. To setup initial bar styles on Android < 8.1, edit your android/app/src/main/res/values/styles.xml file:
   👉 Dont forget to edit android:windowLightStatusBar to match your initial styles.

<resources>

  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Set status bar background transparent -->
    <item name="android:statusBarColor">@android:color/transparent</item>
    <!-- StatusBar initial style: true = dark-content, false = light-content -->
    <item name="android:windowLightStatusBar">true</item>
    <!-- NavigationBar will stay translucent on Android < 8.1 -->
    <item name="android:windowTranslucentNavigation">true</item>
  </style>

</resources>

3. Then for Android >= 8.1, create (or edit) your android/app/src/main/res/values-v27/styles.xml file:
   👉 Dont forget to edit android:{windowLightStatusBar,windowLightNavigationBar} to match your initial styles.

<resources xmlns:tools="http://schemas.android.com/tools">

  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Set bars background transparent -->
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>

    <!-- Bars initial styles: true = dark-content, false = light-content -->
    <item name="android:windowLightStatusBar">true</item>
    <item name="android:windowLightNavigationBar">true</item>

    <!-- Disable auto contrasted background (on Android 10+) -->
    <item name="android:enforceStatusBarContrast" tools:targetApi="q">false</item>
    <item name="android:enforceNavigationBarContrast" tools:targetApi="q">false</item>
  </style>

</resources>

4. Finally edit your android/app/src/main/java/com/yourprojectname/MainActivity.java file:

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate; // <- add this necessary import
import com.zoontek.rnbars.RNBars; // <- add this necessary import

public class MainActivity extends ReactActivity {

  // …

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {

      @Override
      protected void loadApp(String appKey) {
        super.loadApp(appKey);
        RNBars.init(MainActivity.this); // <- initialize the module
      }
    };
  }
}

iOS

You can setup your initial status bar style in Xcode > General > Deployment Info:

Usage

import * as React from "react";
import { StatusBar, NavigationBar, SystemBars } from "react-native-bars";

const App = () => {
  return (
    <>
      <StatusBar animated={true} barStyle="light-content" />
      <NavigationBar barStyle="light-content" />

      {/* Or, to update both with one component: */}
      <SystemBars animated={true} barStyle="light-content" />
    </>
  );
};

API

<StatusBar />

A component to control your app status bar.

import { StatusBar } from "react-native-bars";

type StatusBarProps = {
  // Should transition between status bar property changes be animated? (has no effect on Android)
  animated?: boolean;
  // Sets the color of the status bar content
  barStyle: "light-content" | "dark-content";
};

const App = () => (
  <>
    <StatusBar animated={true} barStyle="dark-content" />
    {/* … */}
  </>
);

StatusBar.currentHeight

The height of the status bar, which includes the top notch height, if present.

const height: number = StatusBar.currentHeight;

StatusBar.pushStackEntry

const entry: StatusBarProps = StatusBar.pushStackEntry(
  props /*: StatusBarProps*/,
);

StatusBar.popStackEntry

StatusBar.popStackEntry(entry/*: StatusBarProps*/): void;

StatusBar.replaceStackEntry

const entry: StatusBarProps = StatusBar.replaceStackEntry(
  entry /*: StatusBarProps*/,
  props /*: StatusBarProps*/,
);

<NavigationBar />

A component to control your app navigation bar. It has no effect on iOS and Android < 8.1.

import { NavigationBar } from "react-native-bars";

type NavigationBarProps = {
  // Sets the color of the navigation bar content
  barStyle: "light-content" | "dark-content";
};

const App = () => (
  <>
    <NavigationBar barStyle="dark-content" />
    {/* … */}
  </>
);

NavigationBar.currentHeight

The height of the navigation bar, which includes the bottom notch height, if present.

const height: number = NavigationBar.currentHeight;

NavigationBar.pushStackEntry

const entry: NavigationBarProps = NavigationBar.pushStackEntry(
  props /*: NavigationBarProps*/,
);

NavigationBar.popStackEntry

NavigationBar.popStackEntry(entry/*: NavigationBarProps*/): void;

NavigationBar.replaceStackEntry

const entry: NavigationBarProps = NavigationBar.replaceStackEntry(
  entry /*: NavigationBarProps*/,
  props /*: NavigationBarProps*/,
);

<SystemBars />

A component to control both your app status and navigation bars.

import { NavigationBar } from "react-native-bars";

type SystemBarsProps = {
  // Should transition between bars property changes be animated? (has no effect on Android)
  animated?: boolean;
  // Sets the color of the bars content
  barStyle: "light-content" | "dark-content";
};

const App = () => (
  <>
    <SystemBars animated={true} barStyle="dark-content" />
    {/* … */}
  </>
);