Fix various spacing issues

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

src/components/hideableHeader.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet } from 'react-native';
-import { ORIENTATION, useDimensions } from '../contexts';
-import styles from '../styles';
 import { useTheme } from 'react-native-paper';
+import { useDeviceOrientation } from '@react-native-community/hooks';
+import styles from '../styles';
 
 const hideableHeaderStyles = StyleSheet.create({
   headerView: {
@@ -22,7 +22,7 @@ const HideableHeader = ({
   children: React.ReactNode;
 }) => {
   const { colors } = useTheme();
-  const { orientation } = useDimensions();
+  const orientation = useDeviceOrientation();
 
   const headerAnim = useRef(new Animated.Value(visible ? 1 : 0)).current;
 
@@ -38,9 +38,7 @@ const HideableHeader = ({
     <Animated.View
       style={[
         hideableHeaderStyles.headerView,
-        orientation === ORIENTATION.PORTRAIT
-          ? styles.paddingTop
-          : styles.smallPaddingTop,
+        orientation === 'portrait' ? styles.paddingTop : styles.smallPaddingTop,
         styles.paddingHorizontal,
         {
           transform: [