fix(wallet-mobile): Change navigation status bar color (#3703)

Emurgo · Oct 23, 2024 · d1386c0 · d1386c0
1 parent ff8374f
commit d1386c0
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 31 deletions.
diff --git a/apps/wallet-mobile/android/app/build.gradle b/apps/wallet-mobile/android/app/build.gradle
@@ -108,8 +108,8 @@ android {
         applicationId "com.emurgo"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 723
         versionName "5.0.1"
+        versionCode 729
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
     }

diff --git a/apps/wallet-mobile/android/app/src/dev/res/values/styles.xml b/apps/wallet-mobile/android/app/src/dev/res/values/styles.xml
@@ -5,8 +5,6 @@
         <!-- Customize your theme here. -->
         <item name="android:forceDarkAllowed">false</item>
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-        <item name="android:navigationBarColor">@android:color/transparent</item>
-        <item name="android:enforceNavigationBarContrast">false</item>
     </style>
 
     <!-- react-native-bootsplash -->

diff --git a/apps/wallet-mobile/android/app/src/nightly/res/values/styles.xml b/apps/wallet-mobile/android/app/src/nightly/res/values/styles.xml
@@ -5,8 +5,6 @@
         <!-- Customize your theme here. -->
         <item name="android:forceDarkAllowed">false</item>
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-        <item name="android:navigationBarColor">@android:color/transparent</item>
-        <item name="android:enforceNavigationBarContrast">false</item>
     </style>
 
     <!-- react-native-bootsplash -->

diff --git a/apps/wallet-mobile/android/app/src/production/res/values/styles.xml b/apps/wallet-mobile/android/app/src/production/res/values/styles.xml
@@ -5,8 +5,6 @@
         <!-- Customize your theme here. -->
         <item name="android:forceDarkAllowed">false</item>
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-        <item name="android:navigationBarColor">@android:color/transparent</item>
-        <item name="android:enforceNavigationBarContrast">false</item>
     </style>
 
     <!-- react-native-bootsplash -->

diff --git a/apps/wallet-mobile/ios/nightly.plist b/apps/wallet-mobile/ios/nightly.plist
@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>610</string>
+	<string>616</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationCategoryType</key>

diff --git a/apps/wallet-mobile/ios/yoroi.xcodeproj/project.pbxproj b/apps/wallet-mobile/ios/yoroi.xcodeproj/project.pbxproj
@@ -839,7 +839,7 @@
 				CODE_SIGN_ENTITLEMENTS = yoroi/yoroi.entitlements;
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 610;
+				CURRENT_PROJECT_VERSION = 616;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = F8NVT2G2L4;
 				ENABLE_BITCODE = NO;
@@ -884,7 +884,7 @@
 				CODE_SIGN_ENTITLEMENTS = yoroi/yoroi.entitlements;
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 610;
+				CURRENT_PROJECT_VERSION = 616;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = F8NVT2G2L4;
 				ENVFILE = "$(PODS_ROOT)/../../.env.production";
@@ -1079,7 +1079,7 @@
 				CODE_SIGN_ENTITLEMENTS = nightly.entitlements;
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 610;
+				CURRENT_PROJECT_VERSION = 616;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = F8NVT2G2L4;
 				ENABLE_BITCODE = NO;
@@ -1124,7 +1124,7 @@
 				CODE_SIGN_ENTITLEMENTS = nightly.entitlements;
 				CODE_SIGN_IDENTITY = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 610;
+				CURRENT_PROJECT_VERSION = 616;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = F8NVT2G2L4;
 				ENVFILE = "$(PODS_ROOT)/../../.env.nightly";

diff --git a/apps/wallet-mobile/ios/yoroi/Info.plist b/apps/wallet-mobile/ios/yoroi/Info.plist
@@ -34,7 +34,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>610</string>
+	<string>616</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationCategoryType</key>

diff --git a/apps/wallet-mobile/ios/yoroiTests/Info.plist b/apps/wallet-mobile/ios/yoroiTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>610</string>
+	<string>616</string>
 </dict>
 </plist>
diff --git a/apps/wallet-mobile/package.json b/apps/wallet-mobile/package.json
@@ -193,6 +193,7 @@
     "react-native-skeleton-placeholder": "^5.2.0",
     "react-native-svg": "13.8.0",
     "react-native-svg-charts": "^5.4.0",
+    "react-native-system-navigation-bar": "^2.6.4",
     "react-native-tab-view": "^3.1.1",
     "react-native-timezone": "^2.3.0",
     "react-native-url-polyfill": "^2.0.0",

diff --git a/apps/wallet-mobile/src/AppNavigator.tsx b/apps/wallet-mobile/src/AppNavigator.tsx
@@ -7,6 +7,7 @@ import * as React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {Alert, AppState, AppStateStatus, InteractionManager, Platform} from 'react-native'
 import RNBootSplash from 'react-native-bootsplash'
+import SystemNavigationBar from 'react-native-system-navigation-bar'
 
 import StorybookScreen from '../.storybook'
 import {ModalProvider} from './components/Modal/ModalContext'
@@ -49,7 +50,12 @@ export const AppNavigator = () => {
   const [routeName, setRouteName] = React.useState<string>()
   useStatusBar(routeName)
   useHideScreenInAppSwitcher()
-  const {atoms, color} = useTheme()
+  const {atoms, color, colorScheme} = useTheme()
+
+  React.useEffect(() => {
+    const buttonsColor = colorScheme === 'default-dark' ? 'light' : 'dark'
+    SystemNavigationBar.setNavigationColor('transparent', buttonsColor, 'navigation')
+  }, [colorScheme])
 
   useAutoLogout()
 

diff --git a/apps/wallet-mobile/translations/messages/src/AppNavigator.json b/apps/wallet-mobile/translations/messages/src/AppNavigator.json
@@ -4,59 +4,59 @@
     "defaultMessage": "!!!Enter PIN",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 230,
+      "line": 237,
       "column": 17,
-      "index": 8390
+      "index": 8706
     },
     "end": {
-      "line": 233,
+      "line": 240,
       "column": 3,
-      "index": 8480
+      "index": 8796
     }
   },
   {
     "id": "components.initialization.custompinscreen.title",
     "defaultMessage": "!!!Set PIN",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 234,
+      "line": 241,
       "column": 18,
-      "index": 8500
+      "index": 8816
     },
     "end": {
-      "line": 237,
+      "line": 244,
       "column": 3,
-      "index": 8598
+      "index": 8914
     }
   },
   {
     "id": "global.actions.dialogs.walletKeysInvalidated.title",
     "defaultMessage": "!!!Auth with OS changes",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 238,
+      "line": 245,
       "column": 25,
-      "index": 8625
+      "index": 8941
     },
     "end": {
-      "line": 241,
+      "line": 248,
       "column": 3,
-      "index": 8739
+      "index": 9055
     }
   },
   {
     "id": "global.actions.dialogs.biometricsChange.message",
     "defaultMessage": "!!!Auth with OS changed detected",
     "file": "src/AppNavigator.tsx",
     "start": {
-      "line": 242,
+      "line": 249,
       "column": 27,
-      "index": 8768
+      "index": 9084
     },
     "end": {
-      "line": 245,
+      "line": 252,
       "column": 3,
-      "index": 8889
+      "index": 9205
     }
   }
 ]
diff --git a/yarn.lock b/yarn.lock
@@ -19546,6 +19546,11 @@ react-native-swipe-gestures@^1.0.5:
   resolved "https://registry.yarnpkg.com/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz#a172cb0f3e7478ccd681fd36b8bfbcdd098bde7c"
   integrity sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw==
 
+react-native-system-navigation-bar@^2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/react-native-system-navigation-bar/-/react-native-system-navigation-bar-2.6.4.tgz#34edee7051dea01531ff2be95dc14f9fa8a540b7"
+  integrity sha512-4pysgADW53PiuHv+2glzNLJnHSxqDszZvLoitLFI5os4D+gCDfxmR36VSET4EnXkzSf8X9mbeFkHYDypDHJyZA==
+
 react-native-tab-view@^3.1.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.5.2.tgz#2789b8af6148b16835869566bf13dc3b0e6c1b46"