NavigationBar and StatusBar not fully transparent on some devices

Question

I'm writing an application using react-native, and I'm trying to show content behind status and navigation bars. I managed to solve this issue by adding some code styles.xml. This managed to solve my issue, but I recently realized that It doesn't fully work on all devices. On my Pixel 6 running Android 12 the status and navigation bars are not fully transparent.

Transparent status bar

I tried many things that got suggested on Stack Overflow, but none of them fully worked. I even managed to get it working on a native android app, but writing the same code in a react-native app doesn't work.

This is the code that I currently have in my styles.xml:

    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>

    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:statusBarColor">@android:color/transparent</item>

    <item name="android:enforceStatusBarContrast"  tools:targetApi="q">true</item>
    <item name="android:enforceNavigationBarContrast"  tools:targetApi="q">true</item>

Datestamp

Remove the first two lines. Translucent means half transparent, the color is controlled by system and it overrides your other attributes. Read more here: Display content edge-to-edge in your app – Ossification

Thank you! You are right, the first 2 lines are unnecessary, but this did not fix the issue. I went through the article you sent before posting it, but reading through it one more time made me realize what I was doing wrong. – Datestamp

Answer 1

I found the solution to this problem. As Eugen Pechance pointed out, the first two lines of my original styles.xml are unnecessary. However, the main thing causing the half-transparent background were android:enforceStatusBarContrast and android:enforceNavigationBarContrast lines. The way that android enforces the contras is by adding that semi-transparent background to the status and navigation bar, which is not the way I thought it works. Setting these values to false does the trick.

Also, according to this article you should add the following line to the MainActivity.java get the content to go behind the status and navigation views:

@Override
  public void onCreate(@Nullable Bundle savedInstanceState) {
    WindowCompat.setDecorFitsSystemWindows(getWindow(), false);

    super.onCreate(savedInstanceState);
  }

Make sure that you override the correct onCreate function, since the default overriden function in react native doesn't get called.

Datestamp

Answer 2

Try to add in MainActivity.java inside the onCreate() the following code:

Window w = getWindow();
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
    }

And on the themes.xml file make sure the parent is NOT any DarkActionBar! for example:

<style name="MyTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

and then add:

    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">@android:color/transparent</item>
    <!-- Navigation Bar color. -->
    <item name="android:navigationBarColor" tools:targetApi="l">@android:color/transparent</item>

Besotted

Answer 3

<StatusBar
      barStyle="light-content" // Change this based on your preference
      backgroundColor="transparent" // Set the default background color
      translucent={true} // Make StatusBar translucent if needed
    />

This will work but after adding this clean gradlew and build again.

Sajovich