type fixes

app.config.js

@@ -234,7 +234,6 @@ module.exports = function (config) {
               compileSdkVersion: 34,
               targetSdkVersion: 34,
               buildToolsVersion: '34.0.0',
-              kotlinVersion: '1.8.0',
               newArchEnabled: false,
             },
           },

package.json

@@ -180,7 +180,7 @@
     "react-native-pager-view": "6.6.0",
     "react-native-picker-select": "^9.3.1",
     "react-native-progress": "bluesky-social/react-native-progress",
-    "react-native-qrcode-styled": "^0.3.2",
+    "react-native-qrcode-styled": "^0.3.3",
     "react-native-reanimated": "^3.16.3",
     "react-native-root-siblings": "^4.1.1",
     "react-native-safe-area-context": "4.14.0",

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-ignore - web only minHeight string
   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>(
       () => ({
@@ -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
+                  ? 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

@@ -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])}
+      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/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'

src/view/com/composer/photos/Gallery.tsx

@@ -124,7 +124,7 @@ type GalleryItemProps = {
   image: ComposerImage
   altTextControlStyle?: ViewStyle
   imageControlsStyle?: ViewStyle
-  imageStyle?: ViewStyle
+  imageStyle?: ImageStyle
   onChange: (next: ComposerImage) => void
   onRemove: () => void
 }
@@ -160,7 +160,7 @@ const GalleryItem = ({
 
   return (
     <View
-      style={imageStyle}
+      style={imageStyle as ViewStyle}
       // Fixes ALT and icons appearing with half opacity when the post is inactive
       renderToHardwareTextureAndroid>
       <TouchableOpacity
@@ -221,7 +221,7 @@ const GalleryItem = ({
 
       <Image
         testID="selectedPhotoImage"
-        style={[styles.image, imageStyle] as ImageStyle}
+        style={[styles.image, imageStyle]}
         source={{
           uri: (image.transformed ?? image.source).path,
         }}

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

@@ -31,6 +31,7 @@ export type ButtonType =
 // Augment type for react-native-web (see https://github.com/necolas/react-native-web/issues/1684#issuecomment-766451866)
 declare module 'react-native' {
   interface PressableStateCallbackType {
+    // @ts-ignore web only
     hovered?: boolean
     focused?: boolean
   }

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) => {

yarn.lock

@@ -16109,7 +16109,7 @@ react-native-progress@bluesky-social/react-native-progress:
   dependencies:
     prop-types "^15.7.2"
 
-react-native-qrcode-styled@^0.3.2:
+react-native-qrcode-styled@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/react-native-qrcode-styled/-/react-native-qrcode-styled-0.3.3.tgz#552b7fb85f8e570524ad3e89b4c0b4a8a82e0b67"
   integrity sha512-DjxFhFAJBY3y2FEBbWSpwtPaSjsEc5RutTHejxzfRNuyTzg1f5thplGyON8yx0kbi6h0h+57s8cH4aSFGj1mQg==