a bunch of type fixes

package.json

@@ -211,14 +211,15 @@
     "@babel/runtime": "^7.26.0",
     "@did-plc/server": "^0.0.1",
     "@expo/config-plugins": "8.0.10",
-    "@expo/prebuild-config": "7.0.9",
+    "@expo/prebuild-config": "8.0.10",
     "@lingui/cli": "^4.5.0",
     "@lingui/macro": "^4.5.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@react-native-community/eslint-config": "^3.0.0",
+    "@react-native-community/cli": "^15.1.2",
-    "@react-native/typescript-config": "^0.74.1",
+    "@react-native-community/eslint-config": "^3.2.0",
-    "@testing-library/jest-native": "^5.4.1",
+    "@react-native/typescript-config": "^0.76.1",
-    "@testing-library/react-native": "^11.5.2",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.8.1",
     "@tsconfig/react-native": "^2.0.3",
     "@types/he": "^1.1.2",
     "@types/jest": "^29.4.0",
@@ -238,12 +239,12 @@
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "babel-jest": "^29.7.0",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.2.1",
     "babel-plugin-macros": "^3.1.0",
-    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-react-compiler": "^19.0.0-beta-63b359f-20241101",
-    "babel-plugin-react-native-web": "^0.18.12",
+    "babel-plugin-react-native-web": "^0.19.13",
-    "babel-preset-expo": "^10.0.0",
+    "babel-preset-expo": "^11.0.15",
     "eslint": "^8.19.0",
     "eslint-plugin-bsky-internal": "link:./eslint",
     "eslint-plugin-ft-flow": "^2.0.3",
@@ -256,13 +257,13 @@
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
     "jest": "^29.7.0",
-    "jest-expo": "^50.0.1",
+    "jest-expo": "^52.0.0-preview.4",
-    "jest-junit": "^15.0.0",
+    "jest-junit": "^16.0.0",
     "lint-staged": "^13.2.3",
-    "metro-react-native-babel-preset": "^0.74.1",
+    "metro-react-native-babel-preset": "^0.76.9",
     "prettier": "^2.8.3",
     "react-compiler-runtime": "^19.0.0-beta-63b359f-20241101",
-    "react-native-dotenv": "^3.3.1",
+    "react-native-dotenv": "^3.4.11",
     "react-refresh": "^0.14.0",
     "react-scripts": "^5.0.1",
     "react-test-renderer": "18.2.0",
@@ -272,8 +273,8 @@
     "url-loader": "^4.1.1",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.10.1",
-    "webpack-cli": "^5.0.1",
+    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.15.2"
   },
   "resolutions": {
     "@types/react": "^18",
@@ -281,7 +282,8 @@
     "**/zod": "3.23.8",
     "**/expo-constants": "16.0.1",
     "**/expo-device": "6.0.2",
-    "@react-native/babel-preset": "0.74.1",
+    "@react-native/babel-preset": "0.76.1",
+    "@react-native/normalize-colors": "0.76.1",
     "@radix-ui/react-focus-scope": "1.1.0"
   },
   "jest": {

src/alf/atoms.ts

@@ -64,6 +64,7 @@ export const atoms = {
    * Used for the outermost components on screens, to ensure that they can fill
    * the screen and extend beyond.
    */
+  // @ts-expect-error - web only styles
   util_screen_outer: [
     web({
       minHeight: '100vh',

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} =
+    const gradientValues = React.useMemo(() => {
-      React.useMemo(() => {
+      const gradient = {
-        const colors: string[] = []
+        primary: tokens.gradients.sky,
-        const hoverColors: string[] = []
+        secondary: tokens.gradients.sky,
-        const locations: number[] = []
+        secondary_inverted: tokens.gradients.sky,
-        const gradient = {
+        negative: tokens.gradients.sky,
-          primary: tokens.gradients.sky,
+        gradient_primary: tokens.gradients.primary,
-          secondary: tokens.gradients.sky,
+        gradient_sky: tokens.gradients.sky,
-          secondary_inverted: tokens.gradients.sky,
+        gradient_midnight: tokens.gradients.midnight,
-          negative: tokens.gradients.sky,
+        gradient_sunrise: tokens.gradients.sunrise,
-          gradient_primary: tokens.gradients.primary,
+        gradient_sunset: tokens.gradients.sunset,
-          gradient_sky: tokens.gradients.sky,
+        gradient_nordic: tokens.gradients.nordic,
-          gradient_midnight: tokens.gradients.midnight,
+        gradient_bonfire: tokens.gradients.bonfire,
-          gradient_sunrise: tokens.gradients.sunrise,
+      }[color || 'primary']
-          gradient_sunset: tokens.gradients.sunset,
-          gradient_nordic: tokens.gradients.nordic,
-          gradient_bonfire: tokens.gradients.bonfire,
-        }[color || 'primary']
 
-        if (variant === 'gradient') {
+      if (variant === 'gradient') {
-          colors.push(...gradient.values.map(([_, color]) => color))
+        if (gradient.values.length < 2) {
-          hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
+          throw new Error(
-          locations.push(...gradient.values.map(([location, _]) => location))
+            'Gradient buttons must have at least two colors in the gradient',
+          )
         }
 
         return {
-          gradientColors: colors,
+          colors: gradient.values.map(([_, color]) => color) as [
-          gradientHoverColors: hoverColors,
+            string,
-          gradientLocations: locations,
+            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>(
       () => ({
@@ -479,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,
@@ -490,10 +500,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
             <LinearGradient
               colors={
                 state.hovered || state.pressed
-                  ? gradientHoverColors
+                  ? gradientValues.hoverColors
-                  : gradientColors
+                  : 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

@@ -15,10 +15,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])}
+      colors={gradient.values.map(c => c[1]) as [string, string, ...string[]]}
-      locations={gradient.values.map(c => c[0])}
+      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/lib/hooks/useNotificationHandler.ts

@@ -177,7 +177,14 @@ export function useNotificationsHandler() {
 
     Notifications.setNotificationHandler({
       handleNotification: async e => {
-        if (e.request.trigger.type !== 'push') return DEFAULT_HANDLER_OPTIONS
+        if (
+          e.request.trigger == null ||
+          typeof e.request.trigger !== 'object' ||
+          !('type' in e.request.trigger) ||
+          e.request.trigger.type !== 'push'
+        ) {
+          return DEFAULT_HANDLER_OPTIONS
+        }
 
         logger.debug(
           'Notifications: received',
@@ -220,6 +227,9 @@ export function useNotificationsHandler() {
 
         if (
           e.actionIdentifier === Notifications.DEFAULT_ACTION_IDENTIFIER &&
+          e.notification.request.trigger != null &&
+          typeof e.notification.request.trigger === 'object' &&
+          'type' in e.notification.request.trigger &&
           e.notification.request.trigger.type === 'push'
         ) {
           logger.debug(

src/view/com/util/forms/DropdownButton.tsx

@@ -87,7 +87,7 @@ export function DropdownButton({
 }: PropsWithChildren<DropdownButtonProps>) {
   const {_} = useLingui()
 
-  const ref1 = useRef<TouchableOpacity>(null)
+  const ref1 = useRef<View>(null)
   const ref2 = useRef<View>(null)
 
   const onPress = (e: GestureResponderEvent) => {

src/view/com/util/forms/NativeDropdown.web.tsx

@@ -229,6 +229,7 @@ const getKey = (label: string, index: number, id?: string) => {
   return `${label}_${index}`
 }
 
+// @ts-expect-error - web only styles. the only style that should be broken here is `outline`
 const styles = StyleSheet.create({
   separator: {
     height: 1,