Add scroll-to-top on back

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/components/hideableHeader.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { useDimensions } from '../contexts';
+import styles from '../styles';
+import { useTheme } from 'react-native-paper';
+
+const hideableHeaderStyles = StyleSheet.create({
+  headerView: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+  },
+});
+
+const HideableHeader = ({
+  visible = true,
+  children,
+}: {
+  visible?: boolean;
+  children: React.ReactNode;
+}) => {
+  const { colors } = useTheme();
+  const { orientation } = useDimensions();
+
+  const headerAnim = useRef(new Animated.Value(visible ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(headerAnim, {
+      toValue: visible ? 1 : 0,
+      duration: visible ? 200 : 150,
+      useNativeDriver: true,
+    }).start();
+  }, [headerAnim, visible]);
+
+  return (
+    <Animated.View
+      style={[
+        hideableHeaderStyles.headerView,
+        orientation == 'portrait' && styles.paddingTop,
+        orientation == 'landscape' && styles.smallPaddingTop,
+        styles.paddingHorizontal,
+        {
+          transform: [
+            {
+              translateY: headerAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [-130, 0],
+              }),
+            },
+          ],
+        },
+        {
+          backgroundColor: colors.background,
+        },
+      ]}>
+      {children}
+    </Animated.View>
+  );
+};
+
+export default HideableHeader;