In react native how do I change root view background color on Android?

Question

I have read a couple of tutorials online but most of the talk of iOS or some talk of Android but using old versions of react, everything has changed now.

If I open MainActivity.java there's only one method

@Override
protected String getMainComponentName() {
    return "myapp";
}

which means I can't access the rootview and change its background color because it seems even the onCreate method isn't available to anyone nowadays.

I also tried opening res/styles and adding my lines there but I keep getting errors

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@android:color/black</item>
</style>

I tried that but nothing changes, still the same grayish background appears. Wish I could just do it in react but adding background there not only adds unnecessary overdraws, when loading there's this lag with one background then later changes to another, its very ugly.

Answer 1

In android/app/src/main/res/values/:

• Create (or edit) colors.xml to add your background color, e.g.:

<resources>
  <color name="background">#AB47BC</color>
</resources>

• In styles.xml, add a theme customization item named android:windowBackground, referencing the chosen color name, e.g.:

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@color/background</item>
  </style>
</resources>