clean rn 0.76 upgrade (#6887)

* package upgrades

* upgrade system ui

* update patches

* rename patch

* rm

* use .set/.set

* resolve yarnlock

* fix accidentally removed package

* fix use permissions hook

* fix some type errors

* type fixes

* more tweaking

* clean

* Discard changes to src/screens/Onboarding/StepProfile/index.tsx

* oops

* fix splash

* use ios/android in config

* Fix tests

* add back patch

* add to rn patch

* fullscreen?

* Revert "add to rn patch"

This reverts commit 4716d2c643.

* try this

* test with revert

* test

* maybe this

* fix config

* Bump @react-native-picker/picker

* Bump some packages

* Rm unused

* Update lockfile

* Rename expo-notifications+0.29.8.patch.md to expo-notifications+0.29.10.patch.md

* Update react-native+0.76.3.patch.md

* Update react-native+0.76.3.patch.md

* Inline splash configs

Jumping around the file is annoying and makes it harder to understand how this is structured.

* Start fixing Android splash

* Downgrade compressor

This version isn't building for me due to https://github.com/numandev1/react-native-compressor/issues/322.

* Make Android splash empty for now

* Work around a bug

* Bump the compressor

* Bump again

* Include splash fixes

* Try updating

* No custom Android splash

* Revert to using icons

* welp

* Fix sizes

* Make sizing work

* Bump size

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

src/components/Button.tsx

@@ -405,37 +405,47 @@ export const Button = React.forwardRef<View, ButtonProps>(
       }
     }, [t, variant, color, size, shape, disabled])
 
-    const {gradientColors, gradientHoverColors, gradientLocations} =
-      React.useMemo(() => {
-        const colors: string[] = []
-        const hoverColors: string[] = []
-        const locations: number[] = []
-        const gradient = {
-          primary: tokens.gradients.sky,
-          secondary: tokens.gradients.sky,
-          secondary_inverted: tokens.gradients.sky,
-          negative: tokens.gradients.sky,
-          gradient_primary: tokens.gradients.primary,
-          gradient_sky: tokens.gradients.sky,
-          gradient_midnight: tokens.gradients.midnight,
-          gradient_sunrise: tokens.gradients.sunrise,
-          gradient_sunset: tokens.gradients.sunset,
-          gradient_nordic: tokens.gradients.nordic,
-          gradient_bonfire: tokens.gradients.bonfire,
-        }[color || 'primary']
+    const gradientValues = React.useMemo(() => {
+      const gradient = {
+        primary: tokens.gradients.sky,
+        secondary: tokens.gradients.sky,
+        secondary_inverted: tokens.gradients.sky,
+        negative: tokens.gradients.sky,
+        gradient_primary: tokens.gradients.primary,
+        gradient_sky: tokens.gradients.sky,
+        gradient_midnight: tokens.gradients.midnight,
+        gradient_sunrise: tokens.gradients.sunrise,
+        gradient_sunset: tokens.gradients.sunset,
+        gradient_nordic: tokens.gradients.nordic,
+        gradient_bonfire: tokens.gradients.bonfire,
+      }[color || 'primary']
 
-        if (variant === 'gradient') {
-          colors.push(...gradient.values.map(([_, color]) => color))
-          hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
-          locations.push(...gradient.values.map(([location, _]) => location))
+      if (variant === 'gradient') {
+        if (gradient.values.length < 2) {
+          throw new Error(
+            'Gradient buttons must have at least two colors in the gradient',
+          )
         }
 
         return {
-          gradientColors: colors,
-          gradientHoverColors: hoverColors,
-          gradientLocations: locations,
+          colors: gradient.values.map(([_, color]) => color) as [
+            string,
+            string,
+            ...string[],
+          ],
+          hoverColors: gradient.values.map(_ => gradient.hover_value) as [
+            string,
+            string,
+            ...string[],
+          ],
+          locations: gradient.values.map(([location, _]) => location) as [
+            number,
+            number,
+            ...number[],
+          ],
         }
-      }, [variant, color])
+      }
+    }, [variant, color])
 
     const context = React.useMemo<ButtonContext>(
       () => ({
@@ -458,6 +468,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
         // @ts-ignore - this will always be a pressable
         ref={ref}
         aria-label={label}
+        aria-pressed={state.pressed}
         accessibilityLabel={label}
         disabled={disabled || false}
         accessibilityState={{
@@ -478,7 +489,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
         onHoverOut={onHoverOut}
         onFocus={onFocus}
         onBlur={onBlur}>
-        {variant === 'gradient' && (
+        {variant === 'gradient' && gradientValues && (
           <View
             style={[
               a.absolute,
@@ -489,10 +500,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
             <LinearGradient
               colors={
                 state.hovered || state.pressed
-                  ? gradientHoverColors
-                  : gradientColors
+                  ? gradientValues.hoverColors
+                  : gradientValues.colors
               }
-              locations={gradientLocations}
+              locations={gradientValues.locations}
               start={{x: 0, y: 0}}
               end={{x: 1, y: 1}}
               style={[a.absolute, a.inset_0]}

src/components/GradientFill.tsx

@@ -14,10 +14,16 @@ export function GradientFill({
     | typeof tokens.gradients.summer
     | typeof tokens.gradients.nordic
 }) {
+  if (gradient.values.length < 2) {
+    throw new Error('Gradient must have at least 2 colors')
+  }
+
   return (
     <LinearGradient
-      colors={gradient.values.map(c => c[1])}
-      locations={gradient.values.map(c => c[0])}
+      colors={gradient.values.map(c => c[1]) as [string, string, ...string[]]}
+      locations={
+        gradient.values.map(c => c[0]) as [number, number, ...number[]]
+      }
       start={{x: 0, y: 0}}
       end={{x: 1, y: 1}}
       style={[a.absolute, a.inset_0]}

src/components/LinearGradientBackground.tsx

@@ -13,7 +13,11 @@ export function LinearGradientBackground({
 }) {
   const gradient = gradients.sky.values.map(([_, color]) => {
     return color
-  })
+  }) as [string, string, ...string[]]
+
+  if (gradient.length < 2) {
+    throw new Error('Gradient must have at least 2 colors')
+  }
 
   return (
     <LinearGradient colors={gradient} style={style}>

src/components/StarterPack/QrCode.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
+// @ts-expect-error missing types
 import QRCode from 'react-native-qrcode-styled'
 import type ViewShot from 'react-native-view-shot'
 import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'