Android: windowLightNavigationBar not working

Background: My background is in web development, ruby and javascript. I'm working on a mostly react-native app, so very likely I'm missing something basic.

What I want

android navigation bar to be white with dark system buttons see image in link white navigation bar

My Current Code

res/values/style.xml

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowLightNavigationBar">true</item> 
    <item name="android:windowTranslucentNavigation">false</item>
    <item name="android:navigationBarColor">#FFFFFF</item>
  </style>
</resources>

What is happening instead

The background AND the buttons are white. which is not so great for UX.

** What I have Tried **

this is what got me where I am now Change navigation bar icon color on Android

I have tried putting style.xml in a values-v27 folder.

Solution

I just worked on this same topic and found out you need to run at least Android 8.1 (or API level 27) on the device/emulator for this to work.

Also, I had to add this to the color of the bar:

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

So, recommended steps:

Create a values-v27 folder
Insert the style:

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

In your other values folder, you kind of have to live with the fact that this windowsLightNavigationBar doesn't apply...

Small remark

I also found a bug on this change, when putting app in background and then opening it again, the navbar buttons stay white for a second before getting the dark color