React Native: Android windowLightNavigationBar not change button colors

Question

In my react-native application, I want to change the bottom navigation bar color to white. I was able to change the color to white by adding the following line to my src/main/res/value/styles.xml file.

 <item name="android:navigationBarColor">@android:color/white</item>

But when I run it on a simulator or in a physical device. It shows as follows. I want to have the buttons in the bottom navigation bar to be highlighted so that users can clearly see the buttons.

Actual Output

Expected Output

What I Did So far

1. Tried adding <item name="android:windowLightNavigationBar">true</item> to styles.xml file.
2. Tried by creating values-28 folder and adding the styles.xml file as mentioned here .
3. Tried changing parent="Theme.AppCompat.Light.NoActionBar to parent="Theme.AppCompat.DayNight.NoActionBar
4. Tried creating a new simulator as mentioned here
5. Tried this as well.

But none of them seems to fix my issue.

My styles.xml files look like this.

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:windowLightNavigationBar">true</item>
    <item name="android:navigationBarColor">@android:color/white</item>

</style>

build.gradle looks like this.

    buildToolsVersion = "29.0.3"
    compileSdkVersion = 29
    minSdkVersion    = 27
    targetSdkVersion = 29
    supportLibVersion = "28.0.0"

I've tested on the following devices

1. Pixel 4 API 30 (Simulator)
2. Pixel 3A XL API 27(Simulator)
3. Redmi Note 7 (Physical Device - Android 10)
4. Mi Note 10 Lite (Physical Device - Android 10)

Any help would be appreciated.

Answer 1

Try to add this line too.

<item name="android:windowDrawsSystemBarBackgrounds">true</item>