From f6769b283fe83d7abbc0545077b3dca978184eed Mon Sep 17 00:00:00 2001 From: John Fawcett Date: Wed, 12 Apr 2023 20:27:55 -0500 Subject: Mobile Web (#427) * WIP * WIP * Fix header offset on web * Remove debug * Fix web mobile feed and FAB layout * Fix modals on mobile web * Remove dead code * Remove ios config that shouldnt be committed now * Move bottom bar into its own folder * Fix web drawer navigation and state behaviors * Remove dark mode toggle from web drawer for now * Fix search on mobile web * Fix the logged out splash screen on mobile web * Fixes to detox simulator --------- Co-authored-by: Paul Frazee --- src/lib/hooks/useMinimalShellMode.tsx | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/lib/hooks/useMinimalShellMode.tsx (limited to 'src/lib/hooks/useMinimalShellMode.tsx') diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx new file mode 100644 index 000000000..e28a0e884 --- /dev/null +++ b/src/lib/hooks/useMinimalShellMode.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import {useStores} from 'state/index' +import {Animated} from 'react-native' +import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' + +export function useMinimalShellMode() { + const store = useStores() + const minimalShellInterp = useAnimatedValue(0) + const footerMinimalShellTransform = { + transform: [{translateY: Animated.multiply(minimalShellInterp, 100)}], + } + + React.useEffect(() => { + if (store.shell.minimalShellMode) { + Animated.timing(minimalShellInterp, { + toValue: 1, + duration: 100, + useNativeDriver: true, + isInteraction: false, + }).start() + } else { + Animated.timing(minimalShellInterp, { + toValue: 0, + duration: 100, + useNativeDriver: true, + isInteraction: false, + }).start() + } + }, [minimalShellInterp, store.shell.minimalShellMode]) + + return {footerMinimalShellTransform} +} -- cgit 1.4.1