feat(android): status and navigation bar color sync

Syncs status and navigation bar with theme type (light/dark) surface color

package.json

@@ -28,6 +28,7 @@
     "react-native-circular-progress": "1.3.6",
     "react-native-config": "1.4.0",
     "react-native-gesture-handler": "1.8.0",
+    "react-native-navigation-bar-color": "2.0.1",
     "react-native-paper": "4.0.0",
     "react-native-reanimated": "1.13.2",
     "react-native-safe-area-context": "3.1.9",

src/constants/theme.ts

@@ -22,7 +22,7 @@ export const theme = (type: 'light' | 'dark'): AppTheme => {
       ...PaperDarkTheme.colors,
       ...NavigationDarkTheme.colors,
       background: '#1E1E1E',
-      surface: '#333333ff',
+      surface: '#333333',
     },
   }
 

src/store/preferences/index.ts

@@ -1,7 +1,9 @@
 import { StatusBar } from 'react-native'
+import changeNavigationBarColor from 'react-native-navigation-bar-color'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import { StoreonModule } from 'storeon'
 import { State, Events } from 'store/types'
+import { theme } from 'constants/theme'
 import { PreferencesStore, ThemeType } from './types'
 
 const STORAGE_KEY = '@preferences'
@@ -59,5 +61,18 @@ export const preferences: StoreonModule<State, Events> = (store) => {
 }
 
 function updateSatusBar (themeType: ThemeType) {
-  StatusBar.setBarStyle(themeType === 'dark' ? 'light-content' : 'dark-content', true)
+  const { colors } = theme(themeType)
+  const isLightContent = themeType === 'dark'
+  const color = colors.surface
+
+  StatusBar.setBackgroundColor(color, true)
+  StatusBar.setBarStyle(isLightContent ? 'light-content' : 'dark-content', true)
+
+  try {
+    changeNavigationBarColor(color, !isLightContent, true)
+  } catch (error) {
+    if (__DEV__) {
+      console.error(error)
+    }
+  }
 }

yarn.lock

@@ -6186,6 +6186,11 @@ react-native-iphone-x-helper@^1.3.0:
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
   integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
 
+[email protected]:
+  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==
+
 [email protected]:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.0.0.tgz#b77862628a89a6b43ba45a9e5e90254810f4ea06"