NavigationBar and StatusBar not fully transparent on some devices

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>

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.