forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {interpolate, useAnimatedStyle} from 'react-native-reanimated'
2import {useSafeAreaInsets} from 'react-native-safe-area-context'
3
4import {useMinimalShellMode} from '#/state/shell/minimal-mode'
5import {useShellLayout} from '#/state/shell/shell-layout'
6import {IS_LIQUID_GLASS} from '#/env'
7
8// Keep these separated so that we only pay for useAnimatedStyle that gets used.
9
10export function useMinimalShellHeaderTransform() {
11 const {headerMode} = useMinimalShellMode()
12 const {headerHeight} = useShellLayout()
13 const {top: topInset} = useSafeAreaInsets()
14
15 const headerPinnedHeight = IS_LIQUID_GLASS ? topInset : 0
16
17 const headerTransform = useAnimatedStyle(() => {
18 const headerModeValue = headerMode.get()
19 return {
20 pointerEvents: headerModeValue === 0 ? 'auto' : 'none',
21 opacity: Math.pow(1 - headerModeValue, 2),
22 transform: [
23 {
24 translateY: interpolate(
25 headerModeValue,
26 [0, 1],
27 [0, headerPinnedHeight - headerHeight.get()],
28 ),
29 },
30 ],
31 }
32 })
33
34 return headerTransform
35}
36
37export function useMinimalShellFooterTransform() {
38 const {footerMode} = useMinimalShellMode()
39 const {footerHeight} = useShellLayout()
40
41 const footerTransform = useAnimatedStyle(() => {
42 const footerModeValue = footerMode.get()
43 return {
44 pointerEvents: footerModeValue === 0 ? 'auto' : 'none',
45 opacity: Math.pow(1 - footerModeValue, 2),
46 transform: [
47 {
48 translateY: interpolate(
49 footerModeValue,
50 [0, 1],
51 [0, footerHeight.get()],
52 ),
53 },
54 ],
55 }
56 })
57
58 return footerTransform
59}
60
61export function useMinimalShellFabTransform() {
62 const {footerMode} = useMinimalShellMode()
63
64 const fabTransform = useAnimatedStyle(() => {
65 return {
66 transform: [
67 {
68 translateY: interpolate(footerMode.get(), [0, 1], [-44, 0]),
69 },
70 ],
71 }
72 })
73 return fabTransform
74}