Make system bar transparent on android (#846)

apps/mobile-app/android/app/src/main/java/net/aliasvault/app/MainActivity.kt

@@ -1,11 +1,13 @@
 package net.aliasvault.app
 import expo.modules.splashscreen.SplashScreenManager
 
-import android.os.Build
 import android.os.Bundle
 import android.content.Intent
 import android.net.Uri
 import android.provider.Settings
+import android.view.WindowManager
+import android.graphics.Color
+import android.view.Window
 
 import com.facebook.react.ReactActivity
 import com.facebook.react.ReactActivityDelegate
@@ -24,6 +26,14 @@ class MainActivity : ReactActivity() {
     SplashScreenManager.registerOnActivity(this)
     // @generated end expo-splashscreen
 
+    window.setDecorFitsSystemWindows(false)
+    window.setNavigationBarColor(Color.TRANSPARENT)
+    window.setStatusBarColor(Color.TRANSPARENT)
+    window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
+    window.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
+    window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION)
+    window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
+
     // Initialize autofill service, this opens the set_autofill_service setting screen
     // to instruct user to enable AliasVault as autofill provider.
     // TODO: this should be triggerable from React Native instead so we can better control flow
@@ -57,23 +67,4 @@ class MainActivity : ReactActivity() {
               fabricEnabled
           ){})
   }
-
-  /**
-    * Align the back button behavior with Android S
-    * where moving root activities to background instead of finishing activities.
-    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
-    */
-  override fun invokeDefaultOnBackPressed() {
-      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
-          if (!moveTaskToBack(false)) {
-              // For non-root activities, use the default implementation to finish them.
-              super.invokeDefaultOnBackPressed()
-          }
-          return
-      }
-
-      // Use the default back button implementation on Android S
-      // because it's doing more than [Activity.moveTaskToBack] in fact.
-      super.invokeDefaultOnBackPressed()
-  }
 }

apps/mobile-app/android/app/src/main/res/values/styles.xml

@@ -3,7 +3,9 @@
     <item name="android:textColor">@android:color/black</item>
     <item name="android:editTextStyle">@style/ResetEditText</item>
     <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="android:statusBarColor">#ffffff</item>
+    <item name="android:statusBarColor">@android:color/transparent</item>
+    <item name="android:navigationBarColor">@android:color/transparent</item>
+    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">
     <item name="android:padding">0dp</item>

apps/mobile-app/app/(tabs)/credentials/index.tsx

@@ -5,6 +5,7 @@ import { useRouter, useLocalSearchParams } from 'expo-router';
 import Toast from 'react-native-toast-message';
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import * as Haptics from 'expo-haptics';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ThemedText } from '@/components/themed/ThemedText';
 import { ThemedView } from '@/components/themed/ThemedView';
@@ -42,6 +43,7 @@ export default function CredentialsScreen() : React.ReactNode {
   const [isLoadingCredentials, setIsLoadingCredentials] = useMinDurationLoading(false, 200);
   const [refreshing, setRefreshing] = useMinDurationLoading(false, 200);
   const [serviceUrl, setServiceUrl] = useState<string | null>(null);
+  const insets = useSafeAreaInsets();
 
   const authContext = useAuth();
   const dbContext = useDb();
@@ -221,7 +223,7 @@ export default function CredentialsScreen() : React.ReactNode {
       fontSize: 20,
     },
     contentContainer: {
-      paddingBottom: 40,
+      paddingBottom: Platform.OS === 'ios' ? insets.bottom + 60 : 10,
       paddingTop: Platform.OS === 'ios' ? 42 : 16,
     },
     emptyText: {

apps/mobile-app/app/(tabs)/emails/index.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View, ScrollView, RefreshControl, Animated , Platform } fro
 import { useNavigation } from 'expo-router';
 import Toast from 'react-native-toast-message';
 import * as Haptics from 'expo-haptics';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { MailboxEmail } from '@/utils/types/webapi/MailboxEmail';
 import { useDb } from '@/context/DbContext';
@@ -19,6 +20,7 @@ import emitter from '@/utils/EventEmitter';
 import { useMinDurationLoading } from '@/hooks/useMinDurationLoading';
 import { useAuth } from '@/context/AuthContext';
 import { ThemedContainer } from '@/components/themed/ThemedContainer';
+
 /**
  * Emails screen.
  */
@@ -35,6 +37,7 @@ export default function EmailsScreen() : React.ReactNode {
   const [isLoading, setIsLoading] = useMinDurationLoading(true, 200);
   const [isRefreshing, setIsRefreshing] = useMinDurationLoading(false, 200);
   const [isTabFocused, setIsTabFocused] = useState(false);
+  const insets = useSafeAreaInsets();
 
   /**
    * Load emails.
@@ -154,7 +157,7 @@ export default function EmailsScreen() : React.ReactNode {
       padding: 20,
     },
     contentContainer: {
-      paddingBottom: 40,
+      paddingBottom: Platform.OS === 'ios' ? insets.bottom + 60 : 10,
       paddingTop: Platform.OS === 'ios' ? 42 : 16,
     },
     emptyText: {

apps/mobile-app/app/login.tsx

@@ -358,7 +358,9 @@ export default function LoginScreen() : React.ReactNode {
     content: {
       backgroundColor: colors.background,
       flex: 1,
+      marginBottom: 16,
       padding: 16,
+      paddingBottom: 0,
     },
     createNewVaultContainer: {
       alignItems: 'center',
@@ -422,7 +424,6 @@ export default function LoginScreen() : React.ReactNode {
       borderRadius: 8,
       borderWidth: 1,
       flexDirection: 'row',
-      marginBottom: 16,
       width: '100%',
     },
     inputIcon: {

apps/mobile-app/app/unlock.tsx

@@ -280,7 +280,6 @@ export default function UnlockScreen() : React.ReactNode {
                 colors={[colors.loginHeader, colors.background]}
                 style={styles.gradientContainer}
               />
-
               <View style={styles.mainContent}>
                 <View style={styles.headerSection}>
                   <View style={styles.logoContainer}>

apps/mobile-app/components/themed/ThemedContainer.tsx

@@ -15,7 +15,6 @@ export function ThemedContainer({ style, ...otherProps }: ThemedContainerProps):
   const styles = StyleSheet.create({
     container: {
       flex: 1,
-      paddingBottom: insets.bottom,
       paddingHorizontal: 14,
       paddingTop: Platform.OS === 'ios' ? insets.top : 0,
     },