mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import {interpolate, useAnimatedStyle} from 'react-native-reanimated'
2
3import {useMinimalShellMode} from '#/state/shell/minimal-mode'
4import {useShellLayout} from '#/state/shell/shell-layout'
5import {useGate} from '../statsig/statsig'
6
7// Keep these separated so that we only pay for useAnimatedStyle that gets used.
8
9export function useMinimalShellHeaderTransform() {
10 const mode = useMinimalShellMode()
11 const {headerHeight} = useShellLayout()
12
13 const headerTransform = useAnimatedStyle(() => {
14 return {
15 pointerEvents: mode.value === 0 ? 'auto' : 'none',
16 opacity: Math.pow(1 - mode.value, 2),
17 transform: [
18 {
19 translateY: interpolate(mode.value, [0, 1], [0, -headerHeight.value]),
20 },
21 ],
22 }
23 })
24
25 return headerTransform
26}
27
28export function useMinimalShellFooterTransform() {
29 const mode = useMinimalShellMode()
30 const {footerHeight} = useShellLayout()
31 const gate = useGate()
32 const isFixedBottomBar = gate('fixed_bottom_bar')
33
34 const footerTransform = useAnimatedStyle(() => {
35 if (isFixedBottomBar) {
36 return {}
37 }
38 return {
39 pointerEvents: mode.value === 0 ? 'auto' : 'none',
40 opacity: Math.pow(1 - mode.value, 2),
41 transform: [
42 {
43 translateY: interpolate(mode.value, [0, 1], [0, footerHeight.value]),
44 },
45 ],
46 }
47 })
48
49 return footerTransform
50}
51
52export function useMinimalShellFabTransform() {
53 const mode = useMinimalShellMode()
54 const gate = useGate()
55 const isFixedBottomBar = gate('fixed_bottom_bar')
56
57 const fabTransform = useAnimatedStyle(() => {
58 if (isFixedBottomBar) {
59 return {
60 transform: [
61 {
62 translateY: -44,
63 },
64 ],
65 }
66 }
67 return {
68 transform: [
69 {
70 translateY: interpolate(mode.value, [0, 1], [-44, 0]),
71 },
72 ],
73 }
74 })
75 return fabTransform
76}