SoFunction
Updated on 2025-04-07

Implementation of react-native android status bar

react-native When developing an app, you will inevitably encounter status bar. The background color and font color are adapted to the App content page and tone. In other words, the status bar color is consistent with the App color, making the user interface more overall.

Equipment system elements

  1. Navigation bar: It is the network, time, power and other information bar at the top of the device
  2. ActionBar: Return button and the default header area of ​​the system. It is generally not used in RN development. Customize it in navigation in RN.
  3. Navigation bar: Physical return, return to desktop, select application and other system navigation bars below the device

2. The presentation form of the status bar

  1. The default display is always displayed on the status bar of the mobile phone system
  2. Transparent status bar, the background color of the status bar is transparent, the color of the status bar is consistent with the color of the App, and the user interface is more overall.
  3. Hide status bar (immersive), the status bar is completely hidden, similar to the effects of full-screen games and video players

2.1 Default display

The system default status bar style cannot be changed

2.2 Transparent status bar

Transparent status bar is very common. Most apps use this mode, making the status bar color consistent with the App color, making the user interface more overall and the entire application looks more beautiful.

There are many ways to implement a transparent status bar:

1. Use the App theme to configure and set the theme in app/main/res/values/

<resources>

 <!-- Base application theme. -->
 <style name="AppTheme" parent="">
  &lt;item name="android:windowTranslucentStatus"&gt;true&lt;/item&gt; // Set the status bar not to occupy space  // <item name="android:windowLightStatusBar">true</item> // Set the font color of the status bar &lt;/style&gt;

&lt;/resources&gt;

This method supports api19, that is, Android 4.4 and above, which will take effect when the app is started. There is permission confirmation, system pop-up windows, etc. when the app is started. When the dark mask like modal pops up, the status bar font will become light.

Set only<item name="android:windowTranslucentStatus">true</item> The transparent status bar is set in this way. The status bar font is white by default. It can no longer be dynamically changed through StatusBar. It is embarrassing when you need to change the background color of the status bar when you need to change the background color of the status bar.

Add another one <item name="android:windowLightStatusBar">true</item>After setting the font color of the status bar in this way, the font will not change dynamically to white when the dark modal pops up, but it can be changed by setting the barStyle through StatusBar, which is not very convenient in fact.

2. Android native settings, set in onCreate in MainActivity

protected void onCreate(Bundle savedInstanceState) {
 (savedInstanceState);
 // Set transparent status bar if (.SDK_INT &gt;= 21) {
  View decorView = getWindow().getDecorView();
  int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
  (option);
  getWindow().setStatusBarColor();
 }
 
 // Set transparent status bar and transparent navigation bar if (.SDK_INT &gt;= 21) {
  View decorView = getWindow().getDecorView();
  int option = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
  (option);
  getWindow().setNavigationBarColor();
  getWindow().setStatusBarColor();
 }
}

The transparent status bar is only supported by systems 5.0 and above. Therefore, a layer of if judgment is made here first. The following code will be executed only when the system version is greater than or equal to 5.0. Next we use SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN and SYSTEM_UI_FLAG_LAYOUT_STABLE , note that the two flags must be used together, indicating that the main content of the application will occupy the space of the system status bar, that is, the status bar will no longer occupy space. Finally, just call the Window's setStatusBarColor() method to set the status bar to a transparent color.

3. Use RN's StatusBar to set the status bar in the page loaded for the first time of the app.

<StatusBar backgroundColor='transparent' translucent barStyle={'dark-content'} />

In this way, you will first try the system's default status bar when the app is first launched and when the app starts, and then change it to the style set above. The advantage is that the status bar can be styled dynamically.

Introduction to StatusBar attributes:

  1. animated: bool Specifies whether the status bar changes should be rendered in animation. Currently supported: backgroundColor, barStyle and hidden
  2. hidden: bool Whether to hide the status bar.
  3. backgroundColor: The background color of the status bar.
  4. translate: bool Specifies whether the status bar is transparent. When set to true, the application will be drawn under the status bar (that is, the so-called "immersion" - a part of it is blocked by the status bar). It is often used with a status bar with a translucent background color.
  5. barStyle: enum('default', 'light-content', 'dark-content') Sets the color of the status bar text.

There is a problem with the above methods. The status bar no longer occupies space, so when laying the page, you need to add the paddingTop value to the height of the status bar.

It can be achieved with a pure front-end, which is also a way to adapt to the current mainstream notch screen. You can get the height of the device status bar using it.

2.3 Hide the status bar and navigation bar

(savedInstanceState);
setContentView(.activity_main);
View decorView = getWindow().getDecorView();
int option = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN;
(option);
ActionBar actionBar = getSupportActionBar();
();

3. Compatibility configuration of light-colored status bar

Currently, the light-colored status bars on the market are basically black and white. The ones that support this setting include Android 6.0 and above; MIUI v6 and above, Flyme 4.0 and above

The specific compatibility plan is as follows:

Flyme 4.0 and above

public static boolean FlymeSetStatusBarLightMode(Window window, boolean dark) {
 boolean result = false;
 if (window != null) {
  try {
    lp = ();
   Field darkFlag = 
     .getDeclaredField("MEIZU_FLAG_DARK_STATUS_BAR_ICON");
   Field meizuFlags = 
     .getDeclaredField("meizuFlags");
   (true);
   (true);
   int bit = (null);
   int value = (lp);
   if (dark) {
    value |= bit;
   } else {
    value &= ~bit;
   }
   (lp, value);
   (lp);
   result = true;
  } catch (Exception e) {

  }
 }
 return result;
}

Android 6.0 and above

public static void setAndroidNativeLightStatusBar(Activity activity, boolean dark) {
 //Status bar font icon color View decor = ().getDecorView();
 if (dark) {
  if (.SDK_INT &gt;= Build.VERSION_CODES.M) {
   (View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR // Light-colored status bar (font icon white)     | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN //contentView full screen (placed under statusbar)     | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
  }
 } else {
  (View.SYSTEM_UI_FLAG_VISIBLE);
 }
}

MIUI v6 and above

public static boolean MIUISetStatusBarLightMode(Activity activity, boolean dark) {
 if(.SDK_INT &gt;= 24){
  return false;
 }
 boolean result = false;
 Window window=();
 if (window != null) {
  Class clazz = ();
  try {
   int darkModeFlag = 0;
   Class layoutParams = ("$LayoutParams");
   Field field = ("EXTRA_FLAG_STATUS_BAR_DARK_MODE");
   darkModeFlag = (layoutParams);
   Method extraFlagField = ("setExtraFlags", , );
   if(dark){
    (window,darkModeFlag,darkModeFlag);//The status bar is transparent and black font   }else{
    (window, 0, darkModeFlag);//Clear black font   }
   result=true;

   if (.SDK_INT &gt;= Build.VERSION_CODES.M) {
    //Development version 7.7.13 and later versions use the system API. The old method is invalid but there will be no errors, so both methods must be added.    if(dark){
     ().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN| View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
    }else {
     ().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
    }
   }
  }catch (Exception e){

  }
 }
 return result;
}

Called in onCreate in MainActivity

((), false);
(this, false); 
(this, true);

Summarize

Implement the transparent status bar. None of the above solutions are fully compatible with android 4.4 versions below. I personally think it is more appropriate to set the transparent status bar + the compatibility configuration of the light-colored status bar + StatusBar to cooperate with the control.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.