subtle avatar grow animation (#5480)

1 files changed, 61 insertions, 0 deletions

diff --git a/src/screens/Profile/Header/GrowableAvatar.tsx b/src/screens/Profile/Header/GrowableAvatar.tsx
new file mode 100644
index 000000000..20ac14892
--- /dev/null
+++ b/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>
+  )
+}