Fix various spacing issues

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

src/screens/memeView.tsx

@@ -1,12 +1,12 @@
 import React, { useRef, useState } from 'react';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { useQuery, useRealm } from '@realm/react';
 import { FlashList } from '@shopify/flash-list';
 import { Appbar, Portal, Snackbar } from 'react-native-paper';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { RootStackParamList, ROUTE } from '../types';
 import { Meme } from '../database';
-import { useDimensions } from '../contexts';
 import { MemeViewItem } from '../components';
 import {
   copyMeme,
@@ -20,22 +20,32 @@ import { NavigationProp, useNavigation } from '@react-navigation/native';
 import styles from '../styles';
 
 const memeViewStyles = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-color-literals
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+    backgroundColor: 'transparent',
+  },
+  // eslint-disable-next-line react-native/no-color-literals
   footer: {
     position: 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
-    height: 80,
+    backgroundColor: 'transparent',
   },
   snackbar: {
-    marginBottom: 90,
+    marginBottom: 64,
   },
 });
 
 const MemeView = ({
   route,
 }: NativeStackScreenProps<RootStackParamList, ROUTE.MEME_VIEW>) => {
-  const { orientation, dimensions } = useDimensions();
+  const { height, width } = useSafeAreaFrame();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const realm = useRealm();
 
@@ -55,35 +65,30 @@ const MemeView = ({
 
   return (
     <>
-      <Appbar.Header>
+      <Appbar.Header style={memeViewStyles.header}>
         <Appbar.BackAction onPress={() => navigation.goBack()} />
         <Appbar.Content title={memes[index].title} />
       </Appbar.Header>
-      <View>
-        <FlashList
-          ref={flashListRef}
-          key={orientation}
-          data={memes}
-          initialScrollIndex={index}
-          onScroll={event => {
-            const newIndex = Math.round(
-              event.nativeEvent.contentOffset.x /
-                event.nativeEvent.layoutMeasurement.width,
-            );
-            if (newIndex !== index) setIndex(newIndex);
-          }}
-          estimatedItemSize={dimensions.width}
-          pagingEnabled
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          estimatedListSize={{
-            height: dimensions.height - 160,
-            width: dimensions.width,
-          }}
-          renderItem={({ item: meme }) => <MemeViewItem meme={meme} />}
-        />
-      </View>
-      <Appbar style={[memeViewStyles.footer, styles.flexRowSpaceEvenly]}>
+      <FlashList
+        ref={flashListRef}
+        key={height}
+        data={memes}
+        initialScrollIndex={index}
+        onScroll={event => {
+          const newIndex = Math.round(
+            event.nativeEvent.contentOffset.x /
+              event.nativeEvent.layoutMeasurement.width,
+          );
+          if (newIndex !== index) setIndex(newIndex);
+        }}
+        estimatedItemSize={width}
+        estimatedListSize={{ height, width }}
+        pagingEnabled
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        renderItem={({ item: meme }) => <MemeViewItem meme={meme} />}
+      />
+      <Appbar style={[styles.flexRowSpaceEvenly, memeViewStyles.footer]}>
         <Appbar.Action
           icon={memes[index].isFavorite ? 'heart' : 'heart-outline'}
           onPress={() => favoriteMeme(realm, memes[index])}