mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {autorun} from 'mobx'
3import {useStores} from 'state/index'
4import {
5 Easing,
6 interpolate,
7 useAnimatedStyle,
8 useSharedValue,
9 withTiming,
10} from 'react-native-reanimated'
11
12export function useMinimalShellMode() {
13 const store = useStores()
14 const minimalShellInterp = useSharedValue(0)
15 const footerMinimalShellTransform = useAnimatedStyle(() => {
16 return {
17 opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
18 transform: [
19 {translateY: interpolate(minimalShellInterp.value, [0, 1], [0, 25])},
20 ],
21 }
22 })
23 const headerMinimalShellTransform = useAnimatedStyle(() => {
24 return {
25 opacity: interpolate(minimalShellInterp.value, [0, 1], [1, 0]),
26 transform: [
27 {translateY: interpolate(minimalShellInterp.value, [0, 1], [0, -25])},
28 ],
29 }
30 })
31 const fabMinimalShellTransform = useAnimatedStyle(() => {
32 return {
33 transform: [
34 {translateY: interpolate(minimalShellInterp.value, [0, 1], [-44, 0])},
35 ],
36 }
37 })
38
39 React.useEffect(() => {
40 return autorun(() => {
41 if (store.shell.minimalShellMode) {
42 minimalShellInterp.value = withTiming(1, {
43 duration: 125,
44 easing: Easing.bezier(0.25, 0.1, 0.25, 1),
45 })
46 } else {
47 minimalShellInterp.value = withTiming(0, {
48 duration: 125,
49 easing: Easing.bezier(0.25, 0.1, 0.25, 1),
50 })
51 }
52 })
53 }, [minimalShellInterp, store.shell.minimalShellMode])
54
55 return {
56 footerMinimalShellTransform,
57 headerMinimalShellTransform,
58 fabMinimalShellTransform,
59 }
60}