Fix various spacing issues

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

src/components/memes/memesList/memesList.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-native';
 import { useSelector } from 'react-redux';
 import { Divider, HelperText } from 'react-native-paper';
-import { useDimensions, ORIENTATION } from '../../../contexts';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { Meme } from '../../../database';
 import { RootState } from '../../../state';
 import { VIEW } from '../../../types';
@@ -17,35 +17,32 @@ import MemesMasonryItem from './memesMasonryItem';
 import MemesGridItem from './memesGridItem';
 import MemesListItem from './memesListItem';
 
-const memesMasonryListStyles = StyleSheet.create({
+const sharedMemesListStyles = StyleSheet.create({
   flashList: {
     paddingBottom: 100,
-    // Needed to prevent fucky MasonryFlashList, see https://github.com/Shopify/flash-list/issues/876
-    paddingHorizontal: 0.1,
   },
   helperText: {
     marginVertical: 15,
   },
 });
 
+const memesMasonryListStyles = StyleSheet.create({
+  flashList: {
+    // Needed to prevent fucky MasonryFlashList, see https://github.com/Shopify/flash-list/issues/876
+    paddingHorizontal: 0.1,
+  },
+});
+
 const memesGridListStyles = StyleSheet.create({
   flashList: {
-    paddingBottom: 100,
     paddingHorizontal: 2.5,
   },
-  helperText: {
-    marginVertical: 12.5,
-  },
 });
 
 const memesListListStyles = StyleSheet.create({
   flashList: {
-    paddingBottom: 100,
     paddingHorizontal: 5,
   },
-  helperText: {
-    marginVertical: 15,
-  },
 });
 
 const MemesList = ({
@@ -61,7 +58,7 @@ const MemesList = ({
   handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   focusMeme: (index: number) => void;
 }) => {
-  const { dimensions, orientation } = useDimensions();
+  const { height, width } = useSafeAreaFrame();
   const view = useSelector((state: RootState) => state.memes.view);
   const masonryColumns = useSelector(
     (state: RootState) => state.settings.masonryColumns,
@@ -70,10 +67,6 @@ const MemesList = ({
     (state: RootState) => state.settings.gridColumns,
   );
 
-  const extraFlashListPadding =
-    flashListPadding +
-    dimensions.height * (orientation === ORIENTATION.PORTRAIT ? 0.02 : 0.04);
-
   return (
     <>
       {view === VIEW.MASONRY && (
@@ -82,8 +75,8 @@ const MemesList = ({
           data={memes}
           estimatedItemSize={getFlashListItemHeight(masonryColumns)}
           estimatedListSize={{
-            height: dimensions.height,
-            width: dimensions.width * 0.92,
+            height,
+            width: width * 0.92,
           }}
           numColumns={masonryColumns}
           showsVerticalScrollIndicator={false}
@@ -91,17 +84,19 @@ const MemesList = ({
             <MemesMasonryItem meme={meme} index={index} focusMeme={focusMeme} />
           )}
           contentContainerStyle={{
-            paddingTop: extraFlashListPadding,
+            paddingTop: flashListPadding,
+            ...sharedMemesListStyles.flashList,
             ...memesMasonryListStyles.flashList,
           }}
           ListEmptyComponent={() => (
             <HelperText
               type={'info'}
-              style={[memesMasonryListStyles.helperText, styles.centerText]}>
+              style={[sharedMemesListStyles.helperText, styles.centerText]}>
               No memes found
             </HelperText>
           )}
           onScroll={handleScroll}
+          fadingEdgeLength={100}
         />
       )}
       {view === VIEW.GRID && (
@@ -110,8 +105,8 @@ const MemesList = ({
           data={memes}
           estimatedItemSize={getFlashListItemHeight(gridColumns)}
           estimatedListSize={{
-            height: dimensions.height,
-            width: dimensions.width * 0.92,
+            height: height,
+            width: width * 0.92,
           }}
           numColumns={gridColumns}
           showsVerticalScrollIndicator={false}
@@ -119,17 +114,19 @@ const MemesList = ({
             <MemesGridItem meme={meme} index={index} focusMeme={focusMeme} />
           )}
           contentContainerStyle={{
-            paddingTop: extraFlashListPadding + 2.5,
+            paddingTop: flashListPadding,
+            ...sharedMemesListStyles.flashList,
             ...memesGridListStyles.flashList,
           }}
           ListEmptyComponent={() => (
             <HelperText
               type={'info'}
-              style={[memesGridListStyles.helperText, styles.centerText]}>
+              style={[sharedMemesListStyles.helperText, styles.centerText]}>
               No memes found
             </HelperText>
           )}
           onScroll={handleScroll}
+          fadingEdgeLength={100}
         />
       )}
       {view === VIEW.LIST && (
@@ -138,8 +135,8 @@ const MemesList = ({
           data={memes}
           estimatedItemSize={50}
           estimatedListSize={{
-            height: dimensions.height,
-            width: dimensions.width * 0.92,
+            height: height,
+            width: width * 0.92,
           }}
           showsVerticalScrollIndicator={false}
           renderItem={({ item: meme, index }) => (
@@ -147,17 +144,19 @@ const MemesList = ({
           )}
           ItemSeparatorComponent={() => <Divider />}
           contentContainerStyle={{
-            paddingTop: extraFlashListPadding,
+            paddingTop: flashListPadding,
+            ...sharedMemesListStyles.flashList,
             ...memesListListStyles.flashList,
           }}
           ListEmptyComponent={() => (
             <HelperText
               type={'info'}
-              style={[memesListListStyles.helperText, styles.centerText]}>
+              style={[sharedMemesListStyles.helperText, styles.centerText]}>
               No memes found
             </HelperText>
           )}
           onScroll={handleScroll}
+          fadingEdgeLength={100}
         />
       )}
     </>