Merge pull request #3 from FuegoFro/edge_to_edge

Enable Android edge-to-edge rendering and consistently show status bar

App.tsx

@@ -1,7 +1,7 @@
 import CommonStyles from "@app/constants/CommonStyles"
 import StackNavigator from "@app/navigation/StackNavigator"
 import {persistor, store} from "@app/store"
-import {LogBox, StatusBar} from "react-native"
+import {LogBox, Platform, StatusBar} from "react-native"
 import ErrorBoundary from "react-native-error-boundary"
 import {GestureHandlerRootView} from "react-native-gesture-handler"
 import {SafeAreaProvider} from "react-native-safe-area-context"
@@ -22,7 +22,7 @@ const App = () => {
         <ErrorBoundary>
           <ReactReduxProvider store={store}>
             <PersistGate loading={null} persistor={persistor}>
-              <StatusBar hidden={true} />
+              {Platform.OS !== "android" && <StatusBar hidden={true} />}
               <StackNavigator />
             </PersistGate>
           </ReactReduxProvider>

android/app/build.gradle

@@ -69,7 +69,7 @@ def getPassword(String keyChain) {
     stdout.toString().trim()
 }
 
-def uploadKeyPassword = getPassword("goodtags-upload")
+def uploadKeyPassword = project.hasProperty('GOODTAGS_UPLOAD_STORE_FILE') ? getPassword("goodtags-upload") : ""
 
 def printPassword = tasks.register("printPassword") {
     doLast {
@@ -132,6 +132,7 @@ android {
     buildTypes {
         debug {
             signingConfig signingConfigs.debug
+            applicationIdSuffix ".debug"
         }
         release {
             // see https://reactnative.dev/docs/signed-apk-android
@@ -147,6 +148,7 @@ dependencies {
     androidTestImplementation('com.wix:detox:+')
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
+    implementation("androidx.activity:activity:1.8.2")
 
     // see https://github.com/wix/Detox/issues/2846
     testImplementation('com.google.android.material:material:1.3.0')
@@ -158,7 +160,7 @@ dependencies {
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.squareup.okhttp3', module:'okhttp'
     }
-    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") 
+    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")

android/app/src/main/AndroidManifest.xml

@@ -25,7 +25,7 @@
                 android:launchMode="singleTask"
                 android:label="@string/app_name"
                 android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-                android:theme="@style/SplashTheme"
+                android:theme="@style/AppTheme"
                 android:windowSoftInputMode="adjustResize"
                 android:exported="true">
             <intent-filter>

android/app/src/main/java/com/fogcitysingers/goodtags/MainActivity.java

@@ -4,8 +4,13 @@
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+import android.graphics.Color;
 import android.os.Bundle;
 
+import androidx.activity.EdgeToEdge;
+import androidx.activity.SystemBarStyle;
+
 public class MainActivity extends ReactActivity {
 
   /**
@@ -20,6 +25,7 @@ protected String getMainComponentName() {
   // react-native-screens override -- see https://github.com/software-mansion/react-native-screens#android
   @Override
   protected void onCreate(Bundle savedInstanceState) {
+    EdgeToEdge.enable(this, SystemBarStyle.light(Color.TRANSPARENT, Color.TRANSPARENT));
     super.onCreate(null);
   }
 
@@ -36,4 +42,4 @@ protected ReactActivityDelegate createReactActivityDelegate() {
             // If you opted-in for the New Architecture, we enable the Fabric Renderer.
             DefaultNewArchitectureEntryPoint.getFabricEnabled());
   }
-}
+}

android/app/src/main/res/values-v23/styles.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="AppTheme" parent="BaseTheme">
+        <item name="android:windowLightStatusBar">true</item>
+    </style>
+</resources>

android/app/src/main/res/values-v27/styles.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="AppTheme" parent="BaseTheme">
+        <item name="android:windowLightStatusBar">true</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">
+            shortEdges
+        </item>
+    </style>
+</resources>

android/app/src/main/res/values/colors.xml

@@ -1,7 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="background_pale">#FFFFFF</color>
-    <color name="colorPrimary">#3F51B5</color>
-    <color name="colorPrimaryDark">#303F9F</color>
-    <color name="colorAccent">#FF4081</color>
 </resources>

android/app/src/main/res/values/styles.xml

@@ -1,12 +1,11 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
-        <!-- Customize your theme here. -->
-    </style>
-
-    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
+    <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <item name="android:windowBackground">@drawable/splash_screen</item>
     </style>
 
+    <!-- Allows overriding attributes for API levels -->
+    <style name="AppTheme" parent="BaseTheme" />
+
 </resources>

android/build.gradle

@@ -4,7 +4,7 @@ buildscript {
     ext {
         buildToolsVersion = "33.0.0"
         minSdkVersion = 26
-        compileSdkVersion = 33
+        compileSdkVersion = 34
         targetSdkVersion = 33
         // https://github.com/software-mansion/react-native-screens/issues/1369
         kotlin_version = '1.8.0'

android/settings.gradle

@@ -4,4 +4,4 @@ include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
 
 apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
-useExpoModules()
+useExpoModules()

index.js

@@ -2,14 +2,14 @@
  * @format
  */
 
-import "react-native-gesture-handler"
 import {AppRegistry} from "react-native"
-import App from "./App"
-import {name as appName} from "./app.json"
+import "react-native-gesture-handler"
 import {
   getUnhandledPromiseRejectionTracker,
   setUnhandledPromiseRejectionTracker,
 } from "react-native-promise-rejection-utils"
+import App from "./App"
+import {name as appName} from "./app.json"
 
 const prevTracker = getUnhandledPromiseRejectionTracker()
 
@@ -21,7 +21,7 @@ if (__DEV__) {
   const errorWarn = global.console.error
   global.console.error = (...arg) => {
     for (const error of ignoreWarns) {
-      if (arg[0].startsWith(error)) {
+      if (typeof arg[0] === "string" && arg[0].startsWith(error)) {
         return
       }
     }

src/components/ListHeader.tsx

@@ -5,8 +5,14 @@ import {DrawerActions, useNavigation} from "@react-navigation/native"
 import {FlashList} from "@shopify/flash-list"
 import {ImpactFeedbackStyle} from "expo-haptics"
 import React from "react"
-import {StyleSheet, TouchableWithoutFeedback, View} from "react-native"
+import {
+  Platform,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native"
 import {IconButton, useTheme} from "react-native-paper"
+import {useSafeAreaInsets} from "react-native-safe-area-context"
 import useHeaderHeight from "../hooks/useHeaderHeight"
 import {NoteHandler} from "../lib/NoteHandler"
 
@@ -30,6 +36,7 @@ export default function ListHeader(props: ListHeaderProps) {
   const shallowScreen = useShallowScreen()
   const {listRef} = props
   const navigation = useNavigation()
+  const insets = useSafeAreaInsets()
 
   const themedStyles = StyleSheet.create({
     logoButton: {
@@ -43,8 +50,14 @@ export default function ListHeader(props: ListHeaderProps) {
     },
   })
 
+  const shallowScreenStyle = {
+    height: Platform.OS === "android" ? insets.top : 0,
+  }
+
   // don't show header on shallow screens
-  return shallowScreen ? null : (
+  return shallowScreen ? (
+    <View style={shallowScreenStyle} />
+  ) : (
     <>
       <TouchableWithoutFeedback
         onPress={async () => {

src/components/SheetMusic.tsx

@@ -1,7 +1,8 @@
 import {useAppSelector} from "@app/hooks"
-import {StyleSheet, useWindowDimensions, View} from "react-native"
+import {Platform, StyleSheet, useWindowDimensions, View} from "react-native"
 import {ActivityIndicator, Text} from "react-native-paper"
 import Pdf from "react-native-pdf"
+import {EdgeInsets, useSafeAreaInsets} from "react-native-safe-area-context"
 import WebView from "react-native-webview"
 
 const isPdf = (uri: string) => uri.toLowerCase().endsWith(".pdf")
@@ -22,6 +23,20 @@ export default function SheetMusic(props: Props) {
   const doAutoRotate = useAppSelector(state => state.options.autoRotate)
   // on android, sometimes pdfs render before orientation change registers
   const showPdf = wideMode || !doAutoRotate
+  const rawInsets = useSafeAreaInsets()
+  const insets =
+    Platform.OS === "android"
+      ? rawInsets
+      : {top: 0, bottom: 0, left: 0, right: 0}
+
+  const pdfStyle = {
+    ...styles.pdf,
+    elevation: 0,
+    paddingTop: insets.top,
+    paddingBottom: insets.bottom,
+    paddingLeft: insets.left,
+    paddingRight: insets.right,
+  }
 
   if (uri) {
     if (isPdf(uri)) {
@@ -35,11 +50,11 @@ export default function SheetMusic(props: Props) {
           minScale={0.5}
           maxScale={2.0}
           renderActivityIndicator={() => <ActivityIndicator />}
-          style={styles.pdf}
+          style={pdfStyle}
         />
       ) : null
     } else {
-      const source = imageSource(uri)
+      const source = imageSource(uri, insets)
       return (
         <WebView
           key={uri}
@@ -66,7 +81,7 @@ export default function SheetMusic(props: Props) {
  * HTML page for viewing non-pdf images in WebView.
  * Designed for landscape or wide screens, puts music full width.
  */
-function imageSource(uri: string): {html: string} {
+function imageSource(uri: string, insets: EdgeInsets): {html: string} {
   return {
     html: `<head>
          <title>sheet music</title>
@@ -87,6 +102,7 @@ function imageSource(uri: string): {html: string} {
              min-height: 100vh;
              align-items: center;
              justify-content: center;
+             padding: ${insets.top}px ${insets.right}px ${insets.bottom}px ${insets.left}px;
            }
            img#music {
              object-fit: contain;

src/hooks/useHeaderHeight.ts

@@ -1,3 +1,4 @@
+import {Platform} from "react-native"
 import {useSafeAreaInsets} from "react-native-safe-area-context"
 
 export const HEADER_HEIGHT = 65
@@ -6,5 +7,6 @@ export const HEADER_HEIGHT = 65
  */
 export default function useHeaderHeight() {
   const {top} = useSafeAreaInsets()
-  return top ? HEADER_HEIGHT + top / 4 : HEADER_HEIGHT
+  const topFactor = Platform.OS === "android" ? 1 : 4
+  return top ? HEADER_HEIGHT + top / topFactor : HEADER_HEIGHT
 }

src/navigation/TabNavigator.tsx

@@ -34,9 +34,11 @@ export default function TabNavigator() {
     },
     tabBar: {
       backgroundColor: TabBarBackground,
-      height: (ios ? 90 : 75) - (shallowScreen ? 30 : 0),
+      height: (ios ? 90 : 75 + insets.bottom) - (shallowScreen ? 30 : 0),
       paddingTop: 5,
-      paddingBottom: ios ? 25 : 15,
+      paddingBottom: ios ? 25 : 15 + insets.bottom,
+      paddingLeft: ios ? 0 : insets.left,
+      paddingRight: ios ? 0 : insets.right,
     },
     tabBarLabel: {
       fontFamily: theme.fonts.labelSmall.fontFamily,