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 <pfrazee@gmail.com>

4 files changed, 66 insertions, 0 deletions

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}
+}
diff --git a/src/lib/hooks/useNavigationTabState.ts b/src/lib/hooks/useNavigationTabState.ts
new file mode 100644
index 000000000..8afc799eb
--- /dev/null
+++ b/src/lib/hooks/useNavigationTabState.ts
@@ -0,0 +1,13 @@
+import {useNavigationState} from '@react-navigation/native'
+import {getTabState, TabState} from 'lib/routes/helpers'
+
+export function useNavigationTabState() {
+  return useNavigationState(state => {
+    return {
+      isAtHome: getTabState(state, 'Home') !== TabState.Outside,
+      isAtSearch: getTabState(state, 'Search') !== TabState.Outside,
+      isAtNotifications:
+        getTabState(state, 'Notifications') !== TabState.Outside,
+    }
+  })
+}
diff --git a/src/lib/hooks/useNavigationTabState.web.ts b/src/lib/hooks/useNavigationTabState.web.ts
new file mode 100644
index 000000000..d0173aa0f
--- /dev/null
+++ b/src/lib/hooks/useNavigationTabState.web.ts
@@ -0,0 +1,13 @@
+import {useNavigationState} from '@react-navigation/native'
+import {getCurrentRoute} from 'lib/routes/helpers'
+
+export function useNavigationTabState() {
+  return useNavigationState(state => {
+    let currentRoute = state ? getCurrentRoute(state).name : 'Home'
+    return {
+      isAtHome: currentRoute === 'Home',
+      isAtSearch: currentRoute === 'Search',
+      isAtNotifications: currentRoute === 'Notifications',
+    }
+  })
+}
diff --git a/src/lib/hooks/useWebMediaQueries.tsx b/src/lib/hooks/useWebMediaQueries.tsx
new file mode 100644
index 000000000..441585442
--- /dev/null
+++ b/src/lib/hooks/useWebMediaQueries.tsx
@@ -0,0 +1,8 @@
+import {useMediaQuery} from 'react-responsive'
+
+export function useWebMediaQueries() {
+  const isDesktop = useMediaQuery({
+    query: '(min-width: 1230px)',
+  })
+  return {isDesktop}
+}