System navigation buttons invisible on Android 8-9

[sandeepsengupta]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

On Android 8.0, 8.1, and 9 (API levels 26-28), in ReactNativeLegalActivity, the three system navigation buttons (Back, Home, and Overview) at the bottom of the screen are invisible:

Screen.Recording.2026-03-23.at.4.16.31.PM.mov

Additionally, on Android 10-14 in light mode with three-button navigation enabled, the three system navigation buttons are optimized for a light background, but the navigation-bar background is dark, causing the button ripple animations to be invisible (dark ripples on a dark background):

Screen.Recording.2026-03-23.at.4.49.16.PM.mov

"Quick and dirty" solution:

In packages/react-native-legal/android/src/main/java/com/reactnativelegal/ReactNativeLegalActivity.kt, change line 34 to:

isAppearanceLightNavigationBars = false

This optimizes the navigation buttons for the dark background on which they appear. See this video taken on Android 9:

Screen.Recording.2026-03-23.at.5.01.45.PM.mov

Other options:

Instead of the above solution, it is very tempting to try to solve this by adding the following code to packages/react-native-legal/android/src/main/res/values/styles.xml:

<item name="android:navigationBarColor">?attr/colorSurface</item>

This causes the navigation bar to have a light background in light mode, which makes a lot of sense. But this messes up the appearance on Android 7 (API 24), because Android 7 only supports light icons and will therefore show light icons on a light background:

We could probably put this code in a values-v26 folder to prevent this problem. But the other problem is that navigationBarColor is deprecated. This makes me wonder if simply enabling edge-to-edge mode on older versions of Android might be a better option. What do you think is the best solution here?

Library version

1.6.2 (in my own project)

Environment info

Note: The system info below is from my own project, not the example app shown here. The example app uses React Native 0.81.4, but my project uses React Native 0.84.1. The bug occurs in both cases.

System:
  OS: macOS 15.7.4
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 41.61 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 25.8.1
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 11.12.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2026.03.09.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK:
    API Levels:
      - "31"
      - "35"
      - "36"
    Build Tools:
      - 35.0.0
      - 36.0.0
      - 36.1.0
    System Images:
      - android-24 | Google APIs Intel x86 Atom
      - android-26 | Google APIs Intel x86 Atom
      - android-27 | Google Play Intel x86 Atom
      - android-28 | Google Play Intel x86 Atom
      - android-29 | Google APIs Intel x86 Atom
      - android-30 | Google APIs Intel x86 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-35 | Google APIs Intel x86_64 Atom
      - android-36.1 | Google Play Intel x86_64 Atom
      - android-36 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.3 AI-253.30387.90.2532.14935130
  Xcode:
    version: 26.3/17C529
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.18
    path: /usr/bin/javac
  Ruby:
    version: 4.0.1
    path: /usr/local/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.1.2
    wanted: 20.1.2
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.84.1
    wanted: 0.84.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

Reproducing invisible buttons (Android 8-9)

1. Run the example app in examples/bare-example on an Android emulator running Android 8.0, 8.1, or 9 (API levels 26, 27, or 28).
2. Tap the "Tap to see list of OSS libraries" button
3. Notice the invisible navigation buttons at the bottom of the screen

Reproducing invisible ripple animations (Android 10-14)

1. Launch an Android emulator running Android 10-14 (API levels 29-34)
2. Make sure three-button navigation is enabled (no gesture navigation)
3. Make sure the emulator is in light mode (Dark theme turned off)
4. Run the example app in examples/bare-example
5. Tap the "Tap to see list of OSS libraries" button
6. Tap one of the three navigation buttons at the bottom of the screen. Notice that the ripple animation does not appear against the dark background.

Reproducible sample code

The code in examples/bare-example is sufficient to reproduce the bug.

[mateusz1913]

Hi @sandeepsengupta, thanks for submitting the issue. If you're interested in contributing the fix, then let's try enabling "edge to edge" mode first as described in https://developer.android.com/develop/ui/views/layout/edge-to-edge#backward-compatible-dispatching

If it will not work, then let me know and I'll try to debug it later this week

[sandeepsengupta]

Thanks for the feedback! In my project, I tried going to node_modules/react-native-legal/android/src/main/java/com/reactnativelegal/ReactNativeLegalActivity.kt and adding the following line just before the call to WindowCompat.getInsetsController:

WindowCompat.enableEdgeToEdge(window)

Unfortunately, this results in a compilation error saying Unresolved reference 'enableEdgeToEdge'.

I see that the enableEdgeToEdge() method was just added in August 2025, so I wonder if I somehow have an old version of the relevant Gradle dependency.

Does this issue happen on your end as well? Thanks again for your help.

[mateusz1913]

Hey @sandeepsengupta, in #143 I have added "edge-to-edge" mode support and set the colors/appearance for navigation bar. I've tested it locally with Android 9 emulator and it looked ok. Let me know if such solution works for you and I can merge it and release it

[sandeepsengupta]

That works great! Thank you so much for all your effort with this.

I tested this in my project by replacing ReactNativeLegalActivity.kt with your updated version. (I did not try it with the example project, though.) I ran it on many different Android emulators, and it worked quite well.

Note: I am not in any hurry for this to be released. If you want to wait a week or two before publishing to npm because of the recent npm attack, feel free.

Thanks again for the fix!

[sandeepsengupta]

Thanks so much for all your work with this! Do you have a timeline for when these changes might be released? No pressure - just wanted to check in. Thanks!

[mateusz1913]

Hi @sandeepsengupta, it's released in v1.6.3!

[sandeepsengupta]

Perfect - works great! Thank you so much!