fix: Header and statusbar (#2183)

* fix: Header and statusbar fix: Android where the status bar was not transparent. fix: Android where the layout of the header would shift on load. ux: Add a hairline pixel border to the bottom of the header. * unused import
NigelBreslaw · Jul 28, 2024 · 711ccbf · 711ccbf
1 parent 6dbb24e
commit 711ccbf
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 16 deletions.
diff --git a/native/android/app/src/main/res/values/strings.xml b/native/android/app/src/main/res/values/strings.xml
@@ -1,6 +1,6 @@
 <resources>
   <string name="app_name">Guardian Ghost</string>
   <string name="expo_splash_screen_resize_mode" translatable="false">native</string>
-  <string name="expo_splash_screen_status_bar_translucent" translatable="false">true</string>
+  <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
   <string name="expo_system_ui_user_interface_style" translatable="false">dark</string>
 </resources>
diff --git a/native/android/app/src/main/res/values/styles.xml b/native/android/app/src/main/res/values/styles.xml
@@ -4,7 +4,7 @@
     <item name="android:editTextStyle">@style/ResetEditText</item>
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="android:statusBarColor">@android:color/transparent</item>
+    <item name="android:statusBarColor">#17101F</item>
     <item name="android:windowBackground">@color/activityBackground</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">

diff --git a/native/app.json b/native/app.json
@@ -21,8 +21,7 @@
       "supportsTablet": false
     },
     "androidStatusBar": {
-      "barStyle": "light-content",
-      "translucent": true
+      "barStyle": "light-content"
     },
     "android": {
 

diff --git a/native/app/Root.tsx b/native/app/Root.tsx
@@ -1,7 +1,7 @@
 import * as SplashScreen from "expo-splash-screen";
 import { NavigationContainer, type NavigationContainerRef, type Theme } from "@react-navigation/native";
 import { useEffect, useRef } from "react";
-import { StatusBar, useWindowDimensions, Platform, Appearance } from "react-native";
+import { useWindowDimensions, Platform, Appearance } from "react-native";
 import { enableFreeze, enableScreens } from "react-native-screens";
 import { object, parse, string } from "valibot";
 import Toast from "react-native-toast-message";
@@ -166,7 +166,6 @@ function Root() {
 
   return (
     <GestureHandlerRootView>
-      {appReady && <StatusBar translucent={true} barStyle={"light-content"} />}
       <NavigationContainer ref={navigationRef} theme={navigationContainerTheme}>
         <App />
         <Toast />

diff --git a/native/app/UI/CharacterHeaderButtons.tsx b/native/app/UI/CharacterHeaderButtons.tsx
@@ -44,7 +44,7 @@ export default function CharacterHeaderButtons() {
   }, []);
 
   return (
-    <Animated.View style={[viewAnimationStyle, { flexDirection: "row", gap: 10 }]}>
+    <Animated.View style={[viewAnimationStyle, { flexDirection: "row", gap: 10, paddingBottom: 8 }]}>
       {ggCharacters.map((ggCharacter, index) => {
         return (
           <TouchableOpacity

diff --git a/native/app/UI/MainDrawer.tsx b/native/app/UI/MainDrawer.tsx
@@ -150,13 +150,7 @@ export default function MainDrawer() {
           sceneContainerStyle: {
             backgroundColor: "#17101F",
           },
-          headerStyle: {
-            backgroundColor: "#17101F",
-            borderBottomWidth: StyleSheet.hairlineWidth,
-            borderBottomColor: "#2A1D38",
-          },
           headerTintColor: "white",
-          drawerActiveBackgroundColor: "blue",
           headerRight: MenuButton,
           headerTitle: CharacterHeaderButtons,
           headerBackground: InventoryHeader,

diff --git a/native/app/inventory/pages/InventoryHeader.tsx b/native/app/inventory/pages/InventoryHeader.tsx
@@ -8,6 +8,7 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from "react-native-reanimated";
+import { View, StyleSheet } from "react-native";
 
 import { useGGStore } from "@/app/store/GGStore.ts";
 
@@ -39,8 +40,19 @@ export default function InventoryHeader() {
   }, []);
 
   return (
-    <Animated.View style={[viewAnimationStyle, { flex: 1 }]}>
-      <Image style={{ flex: 1 }} transition={initialPageLoaded ? 150 : 0} source={characterBackgroundEmblem} />
-    </Animated.View>
+    <View style={{ flex: 1 }}>
+      <Animated.View style={[viewAnimationStyle, { flex: 1 }]}>
+        <Image style={{ flex: 1 }} transition={initialPageLoaded ? 150 : 0} source={characterBackgroundEmblem} />
+      </Animated.View>
+      <View
+        style={{
+          width: "100%",
+          height: StyleSheet.hairlineWidth,
+          backgroundColor: "grey",
+          position: "absolute",
+          bottom: 0,
+        }}
+      />
+    </View>
   );
 }