Thick black edge/border around a React Native app on Android

Question

Some time back I put together an Android app with React Native. We tested it on a number of devices and haven't had any issues of the sort I'm asking about here.

What I'm asking for here is suggestions about what might be causing this. I'm the developer of the app, but in this case I don't know where to begin.

Recently, someone installed it on an HTC One m7, and there's now this thick black border all the way around the screen where the app should be. There's an image at the end.

You can see the app is still extending the full size it should, but that the edges are blacked out.

This is the first time I've seen this, and after some searching can't seem to find anyone else complaining about this sort of thing. This is the only time I've seen it on any of the devices we've run this on.

Any ideas what might be the cause?

Answer 1

In my case, I just remove this line:

<item name="android:windowBackground">@drawable/launch_screen_bitmap</item>

On res/values/styles.xml:

And it works fine.

Answer 2

Removing the <item name="android:windowBackground">@drawable/launch_screen_bitmap</item> solve the issue but you will lost the splash screen. To get the splash screen with background to fill the screen add the bitmap item as follow.

<item>
    <bitmap
        android:gravity="fill_horizontal|fill_vertical"
        android:src="@drawable/background"/>
</item>