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;

src/components/index.ts

@@ -1,5 +1,6 @@
 export { default as FloatingActionButton } from './floatingActionButton';
 export { default as HideableBottomNavigationBar } from './hideableBottomNavigationBar';
+export { default as HideableHeader } from './hideableHeader';
 export { default as LoadingView } from './loadingView';
-export { default as TagChip } from './tagChip';
-export { default as TagPreview } from './tagPreview';
+export { default as TagChip } from './tags/tagChip';
+export { default as TagPreview } from './tags/tagPreview';

src/components/tags/tagChip.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { getContrastColor } from '../utilities';
+import { getContrastColor } from '../../utilities';
 import { Chip } from 'react-native-paper';
-import { Tag } from '../database';
+import { Tag } from '../../database';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 
 const TagChip = ({ tag }: { tag: Tag }) => {

src/components/tags/tagPreview.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { Chip } from 'react-native-paper';
-import styles from '../styles';
-import { useDimensions } from '../contexts';
-import { getContrastColor } from '../utilities';
+import styles from '../../styles';
+import { useDimensions } from '../../contexts';
+import { getContrastColor } from '../../utilities';
 
 const tagPreviewStyles = StyleSheet.create({
   chip: {