robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
xan.lol
1import {type StyleProp, View, type ViewStyle} from 'react-native'
2import Animated, {
3 Extrapolation,
4 interpolate,
5 type SharedValue,
6 useAnimatedStyle,
7} from 'react-native-reanimated'
8import type React from 'react'
9
10import {usePagerHeaderContext} from '#/view/com/pager/PagerHeaderContext'
11import {IS_IOS} from '#/env'
12
13export function GrowableAvatar({
14 children,
15 style,
16}: {
17 children: React.ReactNode
18 style?: StyleProp<ViewStyle>
19}) {
20 const pagerContext = usePagerHeaderContext()
21
22 // pagerContext should only be present on iOS, but better safe than sorry
23 if (!pagerContext || !IS_IOS) {
24 return <View style={style}>{children}</View>
25 }
26
27 const {scrollY} = pagerContext
28
29 return (
30 <GrowableAvatarInner scrollY={scrollY} style={style}>
31 {children}
32 </GrowableAvatarInner>
33 )
34}
35
36function GrowableAvatarInner({
37 scrollY,
38 children,
39 style,
40}: {
41 scrollY: SharedValue<number>
42 children: React.ReactNode
43 style?: StyleProp<ViewStyle>
44}) {
45 const animatedStyle = useAnimatedStyle(() => ({
46 transform: [
47 {
48 scale: interpolate(scrollY.get(), [-150, 0], [1.2, 1], {
49 extrapolateRight: Extrapolation.CLAMP,
50 }),
51 },
52 ],
53 }))
54
55 return (
56 <Animated.View
57 style={[style, {transformOrigin: 'bottom left'}, animatedStyle]}>
58 {children}
59 </Animated.View>
60 )
61}