3 files changed, 85 insertions, 0 deletions
diff --git a/src/lib/hooks/useAnimatedValue.ts b/src/lib/hooks/useAnimatedValue.ts
new file mode 100644
index 000000000..1307ef952
--- /dev/null
+++ b/src/lib/hooks/useAnimatedValue.ts
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import {Animated} from 'react-native'
+
+export function useAnimatedValue(initialValue: number) {
+  const lazyRef = React.useRef<Animated.Value>()
+
+  if (lazyRef.current === undefined) {
+    lazyRef.current = new Animated.Value(initialValue)
+  }
+
+  return lazyRef.current as Animated.Value
+}
diff --git a/src/lib/hooks/useOnMainScroll.ts b/src/lib/hooks/useOnMainScroll.ts
new file mode 100644
index 000000000..41b35dd4f
--- /dev/null
+++ b/src/lib/hooks/useOnMainScroll.ts
@@ -0,0 +1,25 @@
+import {useState} from 'react'
+import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
+import {RootStoreModel} from 'state/index'
+
+export type OnScrollCb = (
+  event: NativeSyntheticEvent<NativeScrollEvent>,
+) => void
+
+export function useOnMainScroll(store: RootStoreModel) {
+  let [lastY, setLastY] = useState(0)
+  let isMinimal = store.shell.minimalShellMode
+  return function onMainScroll(event: NativeSyntheticEvent<NativeScrollEvent>) {
+    const y = event.nativeEvent.contentOffset.y
+    const dy = y - (lastY || 0)
+    setLastY(y)
+
+    if (!isMinimal && y > 10 && dy > 10) {
+      store.shell.setMinimalShellMode(true)
+      isMinimal = true
+    } else if (isMinimal && (y <= 10 || dy < -10)) {
+      store.shell.setMinimalShellMode(false)
+      isMinimal = false
+    }
+  }
+}
diff --git a/src/lib/hooks/usePalette.ts b/src/lib/hooks/usePalette.ts
new file mode 100644
index 000000000..5b9929c7d
--- /dev/null
+++ b/src/lib/hooks/usePalette.ts
@@ -0,0 +1,48 @@
+import {TextStyle, ViewStyle} from 'react-native'
+import {useTheme, PaletteColorName, PaletteColor} from '../ThemeContext'
+
+export interface UsePaletteValue {
+  colors: PaletteColor
+  view: ViewStyle
+  btn: ViewStyle
+  border: ViewStyle
+  borderDark: ViewStyle
+  text: TextStyle
+  textLight: TextStyle
+  textInverted: TextStyle
+  link: TextStyle
+  icon: TextStyle
+}
+export function usePalette(color: PaletteColorName): UsePaletteValue {
+  const palette = useTheme().palette[color]
+  return {
+    colors: palette,
+    view: {
+      backgroundColor: palette.background,
+    },
+    btn: {
+      backgroundColor: palette.backgroundLight,
+    },
+    border: {
+      borderColor: palette.border,
+    },
+    borderDark: {
+      borderColor: palette.borderDark,
+    },
+    text: {
+      color: palette.text,
+    },
+    textLight: {
+      color: palette.textLight,
+    },
+    textInverted: {
+      color: palette.textInverted,
+    },
+    link: {
+      color: palette.link,
+    },
+    icon: {
+      color: palette.icon,
+    },
+  }
+}