Android simulator shows big transparent bulk on top

Issue

When I run my React Native app on Android emulator it shows a big ugly bulk on top of the screen:

The transparent bulk appears only on the android emulator but on physical mobile phones not.

The installed emulator version:

How to make the big ugly transparent bulk disappear?

Solution

XML Way:

I can tell you the way how to remove that in Android Studio.

Go to your themes.xml or styles.xml in your res folder. Add this two lines there:

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

In your layout files for example you want to remove it in your MainActivity.java go to it's XML file called activity_main.xml and add this in the parent View:

android:fitsSystemWindows="true"

---

JAVA Way:

Other way, removing it by code. Paste the following code snippet in your onCreate() method:

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

Your imports above the class are:

import android.os.Build;
import android.view.Window;
import android.view.WindowManager;

Answered By - Etienne Kaiser