Add memes & meme-editing views

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

src/screens/memes.tsx

@@ -9,29 +9,34 @@ import {
 import { useQuery } from '@realm/react';
 import { useTheme, HelperText } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
-import { FlashList } from '@shopify/flash-list';
+import { FlashList, MasonryFlashList } from '@shopify/flash-list';
 import { useFocusEffect } from '@react-navigation/native';
 import styles from '../styles';
 import { SORT_DIRECTION, memesSortQuery } from '../types';
 import { RootState, setNavVisible } from '../state';
-import { Meme, Tag } from '../database';
-import { useDimensions } from '../contexts';
+import { Meme } from '../database';
+import { ORIENTATION, useDimensions } from '../contexts';
 import { HideableHeader, MemesHeader } from '../components';
+import MemeCard from '../components/memes/memeCard';
 
 const memesStyles = StyleSheet.create({
   helperText: {
     marginVertical: 10,
   },
+  flashList: {
+    paddingBottom: 100,
+    // Needed to prevent fucky MasonryFlashList, see https://github.com/Shopify/flash-list/issues/876
+    paddingHorizontal: 0.01,
+  },
 });
 
 const Memes = () => {
   const { colors } = useTheme();
-  const { orientation } = useDimensions();
+  const { dimensions, orientation } = useDimensions();
   const sort = useSelector((state: RootState) => state.memes.sort);
   const sortDirection = useSelector(
     (state: RootState) => state.memes.sortDirection,
   );
-  const view = useSelector((state: RootState) => state.memes.view);
   const favoritesOnly = useSelector(
     (state: RootState) => state.memes.favoritesOnly,
   );
@@ -80,10 +85,11 @@ const Memes = () => {
     setScrollOffset(currentOffset);
   };
 
-  const flashListRef = useRef<FlashList<Tag>>(null);
+  const flashListRef = useRef<FlashList<Meme>>(null);
 
   useFocusEffect(
     useCallback(() => {
+      dispatch(setNavVisible(true));
       const handleBackPress = () => {
         if (scrollOffset > 0) {
           flashListRef.current?.scrollToOffset({ offset: 0, animated: true });
@@ -96,7 +102,7 @@ const Memes = () => {
 
       return () =>
         BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
-    }, [flashListRef, scrollOffset]),
+    }, [dispatch, scrollOffset]),
   );
 
   return (
@@ -115,6 +121,33 @@ const Memes = () => {
           }}
         />
       </HideableHeader>
+      <MasonryFlashList
+        ref={flashListRef}
+        data={memes}
+        estimatedItemSize={200}
+        estimatedListSize={{
+          height: dimensions.height,
+          width: dimensions.width * 0.92,
+        }}
+        numColumns={2}
+        showsVerticalScrollIndicator={false}
+        renderItem={({ item: meme }) => <MemeCard meme={meme} />}
+        contentContainerStyle={{
+          paddingTop:
+            flashListPadding +
+            dimensions.height *
+              (orientation === ORIENTATION.PORTRAIT ? 0.02 : 0.04),
+          ...memesStyles.flashList,
+        }}
+        ListEmptyComponent={() => (
+          <HelperText
+            type={'info'}
+            style={[memesStyles.helperText, styles.centerText]}>
+            No memes found
+          </HelperText>
+        )}
+        onScroll={handleScroll}
+      />
     </View>
   );
 };