Navigation bar colors

To match the style of action sheet navigation bar colors with the app on android, we use react-native-navigation-bar-color on android and the app. You also need to adjust the android default navigation bar color android:navigationBarColor in android/app/src/main/res/values/styles.xml,

 <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Set the default navigation bar color to transparent -->
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>

Install react-native-navigation-bar-color library and then somewhere in your app:

import changeNavigationBarColor from 'react-native-navigation-bar-color';
 
const App = () => {
  // Set this to your theme's background color.
  changeNavigationBarColor('#ffffff');
};

Last updated on January 29, 2024