···11import React, {
22- ComponentProps,
22+ type ComponentProps,
33 forwardRef,
44 useCallback,
55 useMemo,
···77 useState,
88} from 'react'
99import {
1010- NativeSyntheticEvent,
1010+ type NativeSyntheticEvent,
1111 Text as RNText,
1212- TextInput as RNTextInput,
1313- TextInputSelectionChangeEventData,
1212+ type TextInput as RNTextInput,
1313+ type TextInputSelectionChangeEventData,
1414 View,
1515} from 'react-native'
1616import {AppBskyRichtextFacet, RichText} from '@atproto/api'
1717import PasteInput, {
1818- PastedFile,
1919- PasteInputRef,
1818+ type PastedFile,
1919+ type PasteInputRef, // @ts-expect-error no types when installing from github
2020} from '@mattermost/react-native-paste-input'
21212222import {POST_IMG_MAX} from '#/lib/constants'
···2727import {useTheme} from '#/lib/ThemeContext'
2828import {isAndroid, isNative} from '#/platform/detection'
2929import {
3030- LinkFacetMatch,
3030+ type LinkFacetMatch,
3131 suggestLinkCardUri,
3232} from '#/view/com/composer/text-input/text-input-util'
3333import {atoms as a, useAlf} from '#/alf'
···11import React from 'react'
22import {Pressable, View} from 'react-native'
33-import {MeasuredDimensions, runOnJS, runOnUI} from 'react-native-reanimated'
44-import {AppBskyGraphDefs} from '@atproto/api'
33+import Animated, {
44+ measure,
55+ type MeasuredDimensions,
66+ runOnJS,
77+ runOnUI,
88+ useAnimatedRef,
99+} from 'react-native-reanimated'
1010+import {type AppBskyGraphDefs} from '@atproto/api'
511import {msg, Trans} from '@lingui/macro'
612import {useLingui} from '@lingui/react'
713import {useNavigation} from '@react-navigation/native'
81499-import {measureHandle, useHandleRef} from '#/lib/hooks/useHandleRef'
1015import {usePalette} from '#/lib/hooks/usePalette'
1116import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
1217import {makeProfileLink} from '#/lib/routes/links'
1313-import {NavigationProp} from '#/lib/routes/types'
1818+import {type NavigationProp} from '#/lib/routes/types'
1419import {sanitizeHandle} from '#/lib/strings/handles'
1520import {emitSoftReset} from '#/state/events'
1621import {useLightboxControls} from '#/state/lightbox'
1722import {TextLink} from '#/view/com/util/Link'
1823import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
1924import {Text} from '#/view/com/util/text/Text'
2020-import {UserAvatar, UserAvatarType} from '#/view/com/util/UserAvatar'
2525+import {UserAvatar, type UserAvatarType} from '#/view/com/util/UserAvatar'
2126import {StarterPack} from '#/components/icons/StarterPack'
2227import * as Layout from '#/components/Layout'
2328···5257 const {openLightbox} = useLightboxControls()
5358 const pal = usePalette('default')
5459 const canGoBack = navigation.canGoBack()
5555- const aviRef = useHandleRef()
6060+ const aviRef = useAnimatedRef()
56615762 const _openLightbox = React.useCallback(
5863 (uri: string, thumbRect: MeasuredDimensions | null) => {
···8186 if (
8287 avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
8388 ) {
8484- const aviHandle = aviRef.current
8589 runOnUI(() => {
8690 'worklet'
8787- const rect = measureHandle(aviHandle)
9191+ const rect = measure(aviRef)
8892 runOnJS(_openLightbox)(avatar, rect)
8993 })()
9094 }
···111115 paddingBottom: 14,
112116 paddingHorizontal: isMobile ? 12 : 14,
113117 }}>
114114- <View ref={aviRef} collapsable={false}>
118118+ <Animated.View ref={aviRef} collapsable={false}>
115119 <Pressable
116120 testID="headerAviButton"
117121 onPress={onPressAvi}
···125129 <UserAvatar type={avatarType} size={58} avatar={avatar} />
126130 )}
127131 </Pressable>
128128- </View>
132132+ </Animated.View>
129133 <View style={{flex: 1, gap: 4}}>
130134 {isLoading ? (
131135 <LoadingPlaceholder
-1
src/view/com/util/Toast.web.tsx
···99 type FontAwesomeIconStyle,
1010 type Props as FontAwesomeProps,
1111} from '@fortawesome/react-native-fontawesome'
1212-import type React from 'react'
13121413const DURATION = 3500
1514
+14-8
src/view/com/util/images/AutoSizedImage.tsx
···11import React, {useRef} from 'react'
22-import {DimensionValue, Pressable, View} from 'react-native'
22+import {type DimensionValue, Pressable, View} from 'react-native'
33+import Animated, {
44+ type AnimatedRef,
55+ useAnimatedRef,
66+} from 'react-native-reanimated'
37import {Image} from 'expo-image'
44-import {AppBskyEmbedImages} from '@atproto/api'
88+import {type AppBskyEmbedImages} from '@atproto/api'
59import {msg} from '@lingui/macro'
610import {useLingui} from '@lingui/react'
71188-import {HandleRef, useHandleRef} from '#/lib/hooks/useHandleRef'
99-import type {Dimensions} from '#/lib/media/types'
1212+import {type Dimensions} from '#/lib/media/types'
1013import {isNative} from '#/platform/detection'
1114import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
1215import {atoms as a, useBreakpoints, useTheme} from '#/alf'
···6871 image: AppBskyEmbedImages.ViewImage
6972 crop?: 'none' | 'square' | 'constrained'
7073 hideBadge?: boolean
7171- onPress?: (containerRef: HandleRef, fetchedDims: Dimensions | null) => void
7474+ onPress?: (
7575+ containerRef: AnimatedRef<any>,
7676+ fetchedDims: Dimensions | null,
7777+ ) => void
7278 onLongPress?: () => void
7379 onPressIn?: () => void
7480}) {
7581 const t = useTheme()
7682 const {_} = useLingui()
7783 const largeAlt = useLargeAltBadgeEnabled()
7878- const containerRef = useHandleRef()
8484+ const containerRef = useAnimatedRef()
7985 const fetchedDimsRef = useRef<{width: number; height: number} | null>(null)
80868187 let aspectRatio: number | undefined
···103109 const hasAlt = !!image.alt
104110105111 const contents = (
106106- <View ref={containerRef} collapsable={false} style={{flex: 1}}>
112112+ <Animated.View ref={containerRef} collapsable={false} style={{flex: 1}}>
107113 <Image
108114 contentFit={isContain ? 'contain' : 'cover'}
109115 style={[a.w_full, a.h_full]}
···185191 )}
186192 </View>
187193 ) : null}
188188- </View>
194194+ </Animated.View>
189195 )
190196191197 if (cropDisabled) {
+8-8
src/view/com/util/images/Gallery.tsx
···11-import React from 'react'
22-import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
33-import {Image, ImageStyle} from 'expo-image'
44-import {AppBskyEmbedImages} from '@atproto/api'
11+import {Pressable, type StyleProp, View, type ViewStyle} from 'react-native'
22+import {type AnimatedRef} from 'react-native-reanimated'
33+import {Image, type ImageStyle} from 'expo-image'
44+import {type AppBskyEmbedImages} from '@atproto/api'
55import {msg} from '@lingui/macro'
66import {useLingui} from '@lingui/react'
77+import type React from 'react'
7888-import {HandleRef} from '#/lib/hooks/useHandleRef'
99-import {Dimensions} from '#/lib/media/types'
99+import {type Dimensions} from '#/lib/media/types'
1010import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
1111import {PostEmbedViewContext} from '#/view/com/util/post-embeds/types'
1212import {atoms as a, useTheme} from '#/alf'
···2020 index: number
2121 onPress?: (
2222 index: number,
2323- containerRefs: HandleRef[],
2323+ containerRefs: AnimatedRef<any>[],
2424 fetchedDims: (Dimensions | null)[],
2525 ) => void
2626 onLongPress?: EventFunction
···2828 imageStyle?: StyleProp<ImageStyle>
2929 viewContext?: PostEmbedViewContext
3030 insetBorderStyle?: StyleProp<ViewStyle>
3131- containerRefs: HandleRef[]
3131+ containerRefs: AnimatedRef<any>[]
3232 thumbDimsRef: React.MutableRefObject<(Dimensions | null)[]>
3333}
3434