Animate feed/SP avatars too

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -1,5 +1,12 @@
 import React from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
+import Animated, {
+  measure,
+  MeasuredDimensions,
+  runOnJS,
+  runOnUI,
+  useAnimatedRef,
+} from 'react-native-reanimated'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -53,6 +60,7 @@ export function ProfileSubpageHeader({
   const {openLightbox} = useLightboxControls()
   const pal = usePalette('default')
   const canGoBack = navigation.canGoBack()
+  const aviRef = useAnimatedRef()
 
   const onPressBack = React.useCallback(() => {
     if (navigation.canGoBack()) {
@@ -66,16 +74,14 @@ export function ProfileSubpageHeader({
     setDrawerOpen(true)
   }, [setDrawerOpen])
 
-  const onPressAvi = React.useCallback(() => {
+  const _openLightbox = React.useCallback(
-    if (
+    (uri: string, thumbRect: MeasuredDimensions | null) => {
-      avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
-    ) {
       openLightbox({
         images: [
           {
-            uri: avatar,
+            uri,
-            thumbUri: avatar,
+            thumbUri: uri,
-            thumbRect: null,
+            thumbRect,
             dimensions: {
               // It's fine if it's actually smaller but we know it's 1:1.
               height: 1000,
@@ -85,8 +91,21 @@ export function ProfileSubpageHeader({
         ],
         index: 0,
       })
+    },
+    [openLightbox],
+  )
+
+  const onPressAvi = React.useCallback(() => {
+    if (
+      avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
+    ) {
+      runOnUI(() => {
+        'worklet'
+        const rect = measure(aviRef)
+        runOnJS(_openLightbox)(avatar, rect)
+      })()
     }
-  }, [openLightbox, avatar])
+  }, [_openLightbox, avatar, aviRef])
 
   return (
     <CenteredView style={pal.view}>
@@ -134,19 +153,21 @@ export function ProfileSubpageHeader({
           paddingBottom: 6,
           paddingHorizontal: isMobile ? 12 : 14,
         }}>
-        <Pressable
+        <Animated.View ref={aviRef}>
-          testID="headerAviButton"
+          <Pressable
-          onPress={onPressAvi}
+            testID="headerAviButton"
-          accessibilityRole="image"
+            onPress={onPressAvi}
-          accessibilityLabel={_(msg`View the avatar`)}
+            accessibilityRole="image"
-          accessibilityHint=""
+            accessibilityLabel={_(msg`View the avatar`)}
-          style={{width: 58}}>
+            accessibilityHint=""
-          {avatarType === 'starter-pack' ? (
+            style={{width: 58}}>
-            <StarterPack width={58} gradient="sky" />
+            {avatarType === 'starter-pack' ? (
-          ) : (
+              <StarterPack width={58} gradient="sky" />
-            <UserAvatar type={avatarType} size={58} avatar={avatar} />
+            ) : (
-          )}
+              <UserAvatar type={avatarType} size={58} avatar={avatar} />
-        </Pressable>
+            )}
+          </Pressable>
+        </Animated.View>
         <View style={{flex: 1}}>
           {isLoading ? (
             <LoadingPlaceholder