How to change background color of software home/back buttons on Android?

Question

Many Android devices use software home/back buttons at the bottom of the screen. Various apps change the color of those buttons to better match the app color theme.

How can these colors be changed in React Native? (Preferably programmatically, so light and dark screens could use different button colors.)

Examples from Samsung Galaxy S10:

Teams:

Slack 1st screen:

Slack 2nd screen:

@KaranMehta Many apps do it already. In Teams the background is black, in Slack light gray or white (depending on the screen), in Google Authenticator white. — Sampo, May 20 '20 at 16:48
@KaranMehta Please see my answer and reconsider the downvote. — Sampo, May 28 '20 at 06:36

score 8 · Answer 1 · answered May 22 '20 at 07:36

In Android terminology, that is the navigation bar. Since Android 21 (5.0, Lollipop) the color can be changed either using styles.xml or with Window.setNavigationBarColor.

In React Native, you can use for example react-native-navigation-bar-color or react-native-navbar-color packages.

How to change background color of software home/back buttons on Android?

1 Answers1