Skip to content

Commit

Permalink
fix: android navigation bar color is not displaying correctly (#5928)
Browse files Browse the repository at this point in the history
Co-authored-by: Diego Mello <[email protected]>
  • Loading branch information
OtavioStasiak and diegolmello authored Jan 22, 2025
1 parent acc0301 commit 6e789c6
Show file tree
Hide file tree
Showing 9 changed files with 85 additions and 35 deletions.
1 change: 0 additions & 1 deletion android/app/src/main/res/values/styles.xml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="android:colorEdgeEffect">#aaaaaa</item>
<item name="colorPrimaryDark">@color/splashBackground</item>
<item name="android:navigationBarColor">@color/splashBackground</item>
<item name="android:forceDarkAllowed">false</item>
<!-- RN 0.68.2 -->
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
Expand Down
3 changes: 2 additions & 1 deletion app/AppContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import MasterDetailStack from './stacks/MasterDetailStack';
import ShareExtensionStack from './stacks/ShareExtensionStack';
import { ThemeContext } from './theme';
import { setCurrentScreen } from './lib/methods/helpers/log';
import { themes } from './lib/constants';

const createStackNavigator = createNativeStackNavigator;

Expand Down Expand Up @@ -59,7 +60,7 @@ const App = memo(({ root, isMasterDetail }: { root: string; isMasterDetail: bool
}
Navigation.routeNameRef.current = currentRouteName;
}}>
<Stack.Navigator screenOptions={{ headerShown: false, animation: 'none' }}>
<Stack.Navigator screenOptions={{ headerShown: false, animation: 'none', navigationBarColor: themes[theme].surfaceLight }}>
{root === RootEnum.ROOT_LOADING || root === RootEnum.ROOT_LOADING_SHARE_EXTENSION ? (
<Stack.Screen name='AuthLoading' component={AuthLoadingView} />
) : null}
Expand Down
4 changes: 2 additions & 2 deletions app/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { Dimensions, EmitterSubscription, Linking } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
import RNScreens from 'react-native-screens';
import { enableScreens } from 'react-native-screens';
import { Provider } from 'react-redux';

import AppContainer from './AppContainer';
Expand Down Expand Up @@ -36,7 +36,7 @@ import { TSupportedThemes, ThemeContext } from './theme';
import ChangePasscodeView from './views/ChangePasscodeView';
import ScreenLockedView from './views/ScreenLockedView';

RNScreens.enableScreens();
enableScreens();
initStore(store);

interface IDimensions {
Expand Down
12 changes: 6 additions & 6 deletions app/lib/methods/helpers/theme.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Appearance } from 'react-native';
import { Appearance, StatusBar } from 'react-native';
import changeNavigationBarColor from 'react-native-navigation-bar-color';
import setRootViewColor from 'rn-root-view';

Expand Down Expand Up @@ -47,13 +47,14 @@ export const newThemeState = (prevState: { themePreferences: IThemePreference },
return { themePreferences, theme: getTheme(themePreferences) };
};

export const setNativeTheme = async (themePreferences: IThemePreference): Promise<void> => {
export const setNativeTheme = (themePreferences: IThemePreference) => {
const theme = getTheme(themePreferences);
const isLightTheme = theme === 'light';
if (isAndroid) {
const iconsLight = theme === 'light';
try {
// The late param as default is true @ react-native-navigation-bar-color/src/index.js line 8
await changeNavigationBarColor(themes[theme].surfaceLight, iconsLight, true);
changeNavigationBarColor(themes[theme].surfaceLight, isLightTheme, true);
StatusBar.setBackgroundColor(themes[theme].surfaceNeutral);
StatusBar.setBarStyle(isLightTheme ? 'dark-content' : 'light-content', true);
} catch (error) {
// Do nothing
}
Expand All @@ -77,6 +78,5 @@ export const subscribeTheme = (themePreferences: IThemePreference, setTheme: ()
// unsubscribe appearance changes when automatic was disabled
unsubscribeTheme();
}
// set native components theme
setNativeTheme(themePreferences);
};
5 changes: 3 additions & 2 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1292,10 +1292,11 @@ PODS:
- ReactCommon/turbomodule/core
- RNRootView (1.0.3):
- React
- RNScreens (3.29.0):
- RNScreens (3.31.1):
- glog
- RCT-Folly (= 2022.05.16.00)
- React-Core
- React-RCTImage
- RNSVG (13.8.0):
- React-Core
- RNVectorIcons (9.2.0):
Expand Down Expand Up @@ -1768,7 +1769,7 @@ SPEC CHECKSUMS:
RNNotifee: 8e2d3df3f0e9ce8f5d1fe4c967431138190b6175
RNReanimated: 8a4d86eb951a4a99d8e86266dc71d7735c0c30a9
RNRootView: 895a4813dedeaca82db2fa868ca1c333d790e494
RNScreens: 17e2f657f1b09a71ec3c821368a04acbb7ebcb46
RNScreens: 134a7511b12b8eb440b87aac21e36a71295d6024
RNSVG: c1e76b81c76cdcd34b4e1188852892dc280eb902
RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
SDWebImage: 750adf017a315a280c60fde706ab1e552a3ae4e9
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
"react-native-mime-types": "2.3.0",
"react-native-mmkv-storage": "0.9.1",
"react-native-modal": "13.0.1",
"react-native-navigation-bar-color": "2.0.1",
"react-native-navigation-bar-color": "^2.0.2",
"react-native-notifications": "5.1.0",
"react-native-notifier": "1.6.1",
"react-native-picker-select": "9.0.1",
Expand All @@ -117,7 +117,7 @@
"react-native-reanimated": "3.8.1",
"react-native-restart": "0.0.22",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "3.29.0",
"react-native-screens": "3.31.1",
"react-native-scrollable-tab-view": "ptomasroos/react-native-scrollable-tab-view",
"react-native-simple-crypto": "RocketChat/react-native-simple-crypto#fix.6.1.0",
"react-native-skeleton-placeholder": "5.2.4",
Expand Down
13 changes: 0 additions & 13 deletions patches/react-native-navigation-bar-color+2.0.1.patch

This file was deleted.

62 changes: 62 additions & 0 deletions patches/react-native-navigation-bar-color+2.0.2.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
diff --git a/node_modules/react-native-navigation-bar-color/android/src/main/java/com/thebylito/navigationbarcolor/NavigationBarColorModule.java b/node_modules/react-native-navigation-bar-color/android/src/main/java/com/thebylito/navigationbarcolor/NavigationBarColorModule.java
index b3edac7..23174bd 100644
--- a/node_modules/react-native-navigation-bar-color/android/src/main/java/com/thebylito/navigationbarcolor/NavigationBarColorModule.java
+++ b/node_modules/react-native-navigation-bar-color/android/src/main/java/com/thebylito/navigationbarcolor/NavigationBarColorModule.java
@@ -11,6 +11,7 @@ import android.app.Activity;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
+import android.view.WindowInsetsController;
import androidx.annotation.UiThread;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Promise;
@@ -44,15 +45,28 @@ public class NavigationBarColorModule extends ReactContextBaseJavaModule {
}

public void setNavigationBarTheme(Activity activity, Boolean light) {
- if (activity != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
- Window window = activity.getWindow();
- int flags = window.getDecorView().getSystemUiVisibility();
- if (light) {
- flags |= View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
- } else {
- flags &= ~View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
+ if (activity != null) {
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
+ Window window = activity.getWindow();
+ int flags = window.getDecorView().getSystemUiVisibility();
+ if (light) {
+ flags |= View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
+ } else {
+ flags &= ~View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
+ }
+ window.getDecorView().setSystemUiVisibility(flags);
+ }
+
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+ int flag;
+ if (light) {
+ flag = WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS;
+ } else {
+ flag = 0;
+ }
+ final WindowInsetsController insetsController = activity.getWindow().getInsetsController();
+ insetsController.setSystemBarsAppearance(flag, WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS);
}
- window.getDecorView().setSystemUiVisibility(flags);
}
}

diff --git a/node_modules/react-native-navigation-bar-color/src/index.js b/node_modules/react-native-navigation-bar-color/src/index.js
index eeab32f..d4d8a2c 100644
--- a/node_modules/react-native-navigation-bar-color/src/index.js
+++ b/node_modules/react-native-navigation-bar-color/src/index.js
@@ -9,7 +9,7 @@ const changeNavigationBarColor = (
) => {
if (Platform.OS === 'android') {
const LightNav = light ? true : false;
- NavigationBarColor.changeNavigationBarColor(color, LightNav, animated);
+ return NavigationBarColor.changeNavigationBarColor(color, LightNav, animated);
}
};
const hideNavigationBar = () => {
16 changes: 8 additions & 8 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -11999,10 +11999,10 @@ [email protected]:
prop-types "^15.6.2"
react-native-animatable "1.3.3"

[email protected].1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/react-native-navigation-bar-color/-/react-native-navigation-bar-color-2.0.1.tgz#ee2be25cc37105f7da355717b0a9a32c9c059ae6"
integrity sha512-1kE/oxWt+HYjRxdZdvke9tJ365xaee5n3+euOQA1En8zQuSbOxiE4SYEGM7TeaWnmLJ0l37mRnPHaB2H4mGh0A==
react-native-navigation-bar-color@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/react-native-navigation-bar-color/-/react-native-navigation-bar-color-2.0.2.tgz#2e14ca79a656d81d5b4b7433ae43966ef5206444"
integrity sha512-ZmpLWRocyme1au11e5ZuecMS/UCi57nlzgnioi03Q6ERMbeUOqqbWgNBaNB7SsCeqBV6fZPjo3+A64zEIpzw4w==

[email protected]:
version "5.1.0"
Expand Down Expand Up @@ -12080,10 +12080,10 @@ [email protected]:
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz#06113c6b208f982d68ab5c3cebd199ca93db6941"
integrity sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA==

react-native-screens@3.29.0:
version "3.29.0"
resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.29.0.tgz#1dee0326defbc1d4ef4e68287abb32a8e6b76b29"
integrity sha512-yB1GoAMamFAcYf4ku94uBPn0/ani9QG7NdI98beJ5cet2YFESYYzuEIuU+kt+CNRcO8qqKeugxlfgAa3HyTqlg==
react-native-screens@3.31.1:
version "3.31.1"
resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.31.1.tgz#909a890f669e32b0fb1b1410278b71ad2f8238f6"
integrity sha512-8fRW362pfZ9y4rS8KY5P3DFScrmwo/vu1RrRMMx0PNHbeC9TLq0Kw1ubD83591yz64gLNHFLTVkTJmWeWCXKtQ==
dependencies:
react-freeze "^1.0.0"
warn-once "^0.1.0"
Expand Down

0 comments on commit 6e789c6

Please sign in to comment.