[#10253] Bottom system panel is white on dark mode on Android

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

mobile/js_files/package.json

@@ -45,6 +45,7 @@
     "react-native-keychain": "git+https://github.com/status-im/react-native-keychain.git#v.3.0.0-5-status",
     "react-native-languages": "^3.0.2",
     "react-native-mail": "git+https://github.com/status-im/react-native-mail.git#v4.0.0-status",
+    "react-native-navigation-bar-color": "^2.0.1",
     "react-native-navigation-twopane": "git+https://github.com/status-im/react-native-navigation-twopane.git#v0.0.2-status",
     "react-native-reanimated": "^1.7.0",
     "react-native-redash": "^14.0.3",

mobile/js_files/yarn.lock

@@ -6542,6 +6542,11 @@ react-native-languages@^3.0.2:
   version "4.0.0"
   resolved "git+https://github.com/status-im/react-native-mail.git#a5ff17c3e394b5545549fed33883afe4496f127a"
 
+react-native-navigation-bar-color@^2.0.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-twopane@git+https://github.com/status-im/react-native-navigation-twopane.git#v0.0.2-status":
   version "0.0.2"
   resolved "git+https://github.com/status-im/react-native-navigation-twopane.git#04ed5fddfb46a6a3ee30776987acb4d3b11c27d4"

src/mocks/js_dependencies.cljs

@@ -98,6 +98,7 @@
                                  :SafeAreaInsetsContext {:Consumer (fn [])}
                                  :SafeAreaView {}}))
 (def react-native-dark-mode #js {"eventEmitter" {} "initialMode" {}})
+(def react-native-navigation-bar-color  #js {"changeNavigationBarColor" #()})
 
 (def back-handler #js {:addEventListener identity
                        :removeEventListener identity})
@@ -187,6 +188,7 @@
     "react-native-safe-area-context" safe-area-context
     "react-native-config" config
     "react-native-dark-mode" react-native-dark-mode
+    "react-native-navigation-bar-color" react-native-navigation-bar-color
     "react-native-iphone-x-helper" (clj->js {:getStatusBarHeight (fn [])
                                              :getBottomSpace (fn [])})
     "react-native-screens" (clj->js {})

src/status_im/init/core.cljs

@@ -81,5 +81,4 @@
  ::init-theme
  (fn []
    (utils.theme/add-mode-change-listener #(re-frame/dispatch [:system-theme-mode-changed %]))
-   (when (utils.theme/is-dark-mode)
+   (theme/change-theme (if (utils.theme/is-dark-mode) :dark :light))))
-     (theme/change-theme :dark))))

src/status_im/theme/core.cljs

@@ -1,9 +1,11 @@
 (ns status-im.theme.core
   (:require [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.colors :as colors]
-            [quo.theme :as quo-theme]))
+            [quo.theme :as quo-theme]
+            ["react-native-navigation-bar-color" :default changeNavigationBarColor]))
 
 (defn change-theme [theme]
   (quo-theme/set-theme theme)
   (colors/set-theme theme)
-  (status-bar/set-status-bar nil))
+  (status-bar/set-status-bar nil)
+  (changeNavigationBarColor colors/white (= theme :light)))