How do I change the Grey top banner in Android / React Native?

TLDR;

It's a display bug on the Pixel 4 emulator. Real Pixel 4 doesn't have that gap.

Edit

My answer below was not spot on. I tried on an emulated Pixel 4, API 29 (with Android Studio 4.2, macOS Big Sur) with rounded corners, as yours, and it rather seems to be an issue with the curve of the phone than an empty ActionBar.

My app on a pixel 4:

Even Youtube has this space:

Edit 2

Compared with a real Pixel 4

We clearly see that this gigantic gap is only on the emulator. That's a bug on the emulator, and probably the main reason why no one talks about it around the web (googling Pixel 4 status bar height shows angry Pixel 5 owners results about its huge height).

Didn't found any bug report about it, I'll file one.

Old answer

What you see is probably an empty ActionBar, that has the same color of your StatusBar.

If you use the default theme, your app will use it :

Beginning with Android 3.0 (API level 11), all activities that use the default theme have an ActionBar as an app bar.

It displays your Application's name, defined in your MainApplication's android:label on your AndroidManifest.xml (or MainActivity's if not found). As it's empty, there's just an empty space displayed.

As you manage your own navbar, you can disable with the base theme of your choice Theme.AppCompat.*.NoActionBar, on values/styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- You can set the color of your status bar here, or with RN - see further on the answer -->
    <item name="android:statusBarColor">@color/dark</item>
</style>

Don't forget to apply this theme to your MainApplication, in your AndroidManifest.xml:

<application
  android:name=".MainApplication"
  android:theme="@style/AppTheme"
  ...

To illustrate better, here's what it looks like:

With the NoActionBar (code above)

With parent="Theme.AppCompat.Light" and <item name="android:statusBarColor">@color/dark</item>

With parent="Theme.AppCompat", and an empty app name.

For the second part of your question, you can either change the color of your status bar here (see the docs for this), or within React Native.

go to

android/app/src/main/res/values/styles.xmlandroid/app/src/main/res/values/styles.xml

and add this code. it will remove

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">
            #000000
        </item>
    </style>
</resources>