diff options
Diffstat (limited to 'src/view/com/home/HomeHeaderLayoutMobile.tsx')
-rw-r--r-- | src/view/com/home/HomeHeaderLayoutMobile.tsx | 67 |
1 files changed, 62 insertions, 5 deletions
diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index e537abfaa..4817757b5 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -1,6 +1,15 @@ import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' -import Animated from 'react-native-reanimated' +import Animated, { + useAnimatedStyle, + useReducedMotion, + useSharedValue, + withDelay, + withRepeat, + withSequence, + withSpring, + withTiming, +} from 'react-native-reanimated' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -11,10 +20,11 @@ import {HITSLOP_10} from 'lib/constants' import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform' import {usePalette} from 'lib/hooks/usePalette' import {isWeb} from 'platform/detection' -import {Logo} from '#/view/icons/Logo' +// import {Logo} from '#/view/icons/Logo' import {atoms} from '#/alf' import {useTheme} from '#/alf' import {atoms as a} from '#/alf' +import {Icon, Trigger} from '#/components/dialogs/nuxs/TenMillion/Trigger' import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' @@ -39,6 +49,43 @@ export function HomeHeaderLayoutMobile({ setDrawerOpen(true) }, [setDrawerOpen]) + // TEMPORARY - REMOVE AFTER MILLY + // This will just cause the icon to shake a bit when the user first opens the app, drawing attention to the celebration + // 🎉 + const rotate = useSharedValue(0) + const reducedMotion = useReducedMotion() + + // Run this a single time on app mount. + React.useEffect(() => { + if (reducedMotion) return + + // Waits 1500ms, then rotates 10 degrees with a spring animation. Repeats once. + rotate.value = withDelay( + 1000, + withRepeat( + withSequence( + withTiming(10, {duration: 100}), + withSpring(0, { + mass: 1, + damping: 1, + stiffness: 200, + overshootClamping: false, + }), + ), + 2, + false, + ), + ) + }, [rotate, reducedMotion]) + + const animatedStyle = useAnimatedStyle(() => ({ + transform: [ + { + rotateZ: `${rotate.value}deg`, + }, + ], + })) + return ( <Animated.View style={[pal.view, pal.border, styles.tabBar, headerMinimalShellTransform]} @@ -59,9 +106,19 @@ export function HomeHeaderLayoutMobile({ <Menu size="lg" fill={t.atoms.text_contrast_medium.color} /> </TouchableOpacity> </View> - <View> - <Logo width={30} /> - </View> + <Animated.View style={animatedStyle}> + <Trigger> + {ctx => ( + <Icon + width={28} + style={{ + opacity: ctx.pressed ? 0.8 : 1, + }} + /> + )} + </Trigger> + {/* <Logo width={30} /> */} + </Animated.View> <View style={[ atoms.flex_row, |