subtle avatar grow animation (#5480)

src/screens/Profile/Header/GrowableAvatar.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import Animated, {
+  Extrapolation,
+  interpolate,
+  SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated'
+
+import {isIOS} from '#/platform/detection'
+import {usePagerHeaderContext} from '#/view/com/pager/PagerHeaderContext'
+
+export function GrowableAvatar({
+  children,
+  style,
+}: {
+  children: React.ReactNode
+  style?: StyleProp<ViewStyle>
+}) {
+  const pagerContext = usePagerHeaderContext()
+
+  // pagerContext should only be present on iOS, but better safe than sorry
+  if (!pagerContext || !isIOS) {
+    return <View style={style}>{children}</View>
+  }
+
+  const {scrollY} = pagerContext
+
+  return (
+    <GrowableAvatarInner scrollY={scrollY} style={style}>
+      {children}
+    </GrowableAvatarInner>
+  )
+}
+
+function GrowableAvatarInner({
+  scrollY,
+  children,
+  style,
+}: {
+  scrollY: SharedValue<number>
+  children: React.ReactNode
+  style?: StyleProp<ViewStyle>
+}) {
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        scale: interpolate(scrollY.value, [-150, 0], [1.2, 1], {
+          extrapolateRight: Extrapolation.CLAMP,
+        }),
+      },
+    ],
+  }))
+
+  return (
+    <Animated.View
+      style={[style, {transformOrigin: 'bottom left'}, animatedStyle]}>
+      {children}
+    </Animated.View>
+  )
+}

src/screens/Profile/Header/Shell.tsx

@@ -19,6 +19,7 @@ import {UserBanner} from '#/view/com/util/UserBanner'
 import {atoms as a, useTheme} from '#/alf'
 import {LabelsOnMe} from '#/components/moderation/LabelsOnMe'
 import {ProfileHeaderAlerts} from '#/components/moderation/ProfileHeaderAlerts'
+import {GrowableAvatar} from './GrowableAvatar'
 import {GrowableBanner} from './GrowableBanner'
 
 interface Props {
@@ -119,6 +120,7 @@ let ProfileHeaderShell = ({
         </View>
       )}
 
+      <GrowableAvatar style={styles.aviPosition}>
         <TouchableWithoutFeedback
           testID="profileHeaderAviButton"
           onPress={onPressAvi}
@@ -140,6 +142,7 @@ let ProfileHeaderShell = ({
             />
           </View>
         </TouchableWithoutFeedback>
+      </GrowableAvatar>
     </View>
   )
 }
@@ -168,10 +171,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  avi: {
+  aviPosition: {
     position: 'absolute',
     top: 110,
     left: 10,
+  },
+  avi: {
     width: 94,
     height: 94,
     borderRadius: 47,