feat: upgrade to react native 0.79

This was necessary because we had to use the newest iOS SDK, which had an issue with react-native, which was only fixed with the newest versions.

The move to new architecture has been hellish, but all appears to work. It requires more patches, and it shows which packages are currently maintained poorly. This goes especially for react-native-track-player. We're using a fork right now, but in order to make that work, we had to switch to pnpm.

src/components/App.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { Provider } from 'react-redux';
 import TrackPlayer, { Capability } from 'react-native-track-player';
 import { PersistGate } from 'redux-persist/integration/react';
@@ -11,6 +11,7 @@ import {
 } from '@react-navigation/native';
 import { ColorSchemeProvider, themes, useUserOrSystemScheme } from './Colors';
 import DownloadManager from './DownloadManager';
+import AppLoading from './AppLoading';
 
 const LightTheme = {
     ...DefaultTheme,
@@ -44,14 +45,14 @@ function ThemedNavigationContainer({ children }: PropsWithChildren<{}>) {
     );
 }
 
-// Track whether the player has already been setup, so that we don't
-// accidentally do it twice.
-let hasSetupPlayer = false;
+export default function App(): JSX.Element | null {
+    // Track whether the player has already been setup, so that we don't
+    // accidentally do it twice.
+    const [hasSetupPlayer, setHasSetupPlayer] = useState(false);
 
-export default function App(): JSX.Element {
     useEffect(() => {
         async function setupTrackPlayer() {
-            await TrackPlayer.setupPlayer();
+            await TrackPlayer.setupPlayer({ autoHandleInterruptions: true });
             await TrackPlayer.updateOptions({
                 capabilities: [
                     Capability.Play,
@@ -63,13 +64,18 @@ export default function App(): JSX.Element {
                 ],
                 progressUpdateEventInterval: 5,
             });
+            setHasSetupPlayer(true);
         }
 
         if (!hasSetupPlayer) {
             setupTrackPlayer();
-            hasSetupPlayer = true;
         }
-    }, []);
+    }, [hasSetupPlayer]);
+
+    // GUARD: Wait for setup of the player before showing the rest of the app
+    if (!hasSetupPlayer) {
+        return (<AppLoading />);
+    }
 
     return (
         <Provider store={store}>

src/components/AppLoading.tsx

@@ -0,0 +1,25 @@
+import { useColorScheme } from 'react-native';
+import styled from 'styled-components/native';
+
+const Container = styled.View`
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+`;
+
+const Logo = styled.Image`
+    width: 64px;
+    height: 64px;
+    border-radius: 8px;
+    border: 1px solid #e6e6e6;
+`;
+
+export default function AppLoading() {
+    const scheme = useColorScheme();
+
+    return (
+        <Container style={{ backgroundColor: scheme === 'dark' ? '#111' : '#fff' }}>
+            <Logo source={require('../assets/icons/app-icon.png')} />
+        </Container>
+    );
+}

src/components/Colors.tsx

@@ -157,21 +157,28 @@ export function DefaultStylesProvider(props: DefaultStylesProviderProps) {
     return props.children(defaultStyles);
 }
 
-export function ColoredBlurView(props: PropsWithChildren<BlurViewProps>) {
+export function ColoredBlurView({ children, style, ...props }: PropsWithChildren<BlurViewProps>) {
     const systemScheme = useColorScheme();
     const userScheme = useTypedSelector((state) => state.settings.colorScheme);
     const scheme = userScheme === ColorScheme.System ? systemScheme : userScheme;
 
     return Platform.OS === 'ios' ? (
-        <BlurView
-            {...props}
-            blurType={Platform.OS === 'ios' && majorPlatformVersion >= 13 
-                ? scheme === 'dark' ? 'materialDark' : 'materialLight'
-                : scheme === 'dark' ? 'extraDark' : 'xlight'
-            } />
+        <View style={[style, { overflow: 'hidden' }]}>
+            <BlurView
+                style={[ StyleSheet.absoluteFill, { overflow: 'hidden'} ]}
+                {...props}
+                blurType={Platform.OS === 'ios' && majorPlatformVersion >= 13 
+                    ? scheme === 'dark' ? 'materialDark' : 'materialLight'
+                    : scheme === 'dark' ? 'extraDark' : 'xlight'
+                }
+            />
+            {children}
+        </View>
     ) : (
-        <View {...props} style={[ props.style, {
+        <View {...props} style={[ style, {
             backgroundColor: scheme === 'light' ? '#f6f6f6fb' : '#333333fb',
-        } ]} />
+        } ]}>
+            {children}
+        </View>
     );
 }

src/components/Input.tsx

@@ -15,7 +15,7 @@ const Container = styled.Pressable<{ hasIcon?: boolean }>`
     
     ${Platform.select({
         ios: css`padding: 12px;`,
-        android: css`padding: 4px 12px;`,
+        android: css`padding: 12px;`,
     })}
 
     ${({ hasIcon }) => hasIcon && css`