Fix a couple of bugs

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

src/screens/editors/meme/memeTagSelector/memeTagSearchModal.tsx

@@ -148,7 +148,7 @@ const MemeTagSearchModal = ({
               active={memeTags.has(tag.id.toHexString())}
             />
           )}
-          ListEmptyComponent={() => (
+          ListFooterComponent={() => (
             <Chip
               icon="plus"
               mode="outlined"

src/screens/memeView/memeView.tsx

@@ -71,7 +71,7 @@ const MemeView = ({
 
   const flashListRef = useRef<FlashList<Meme>>(null);
 
-  const index = useRef(route.params.index);
+  const [index, setIndex] = useState(route.params.index);
   const memes = useQuery<Meme>(Meme.schema.name, collectionIn => {
     return collectionIn
       .filtered(multipleIdQuery(route.params.ids))
@@ -83,8 +83,8 @@ const MemeView = ({
 
   useEffect(() => {
     if (memes.length === 0) navigation.goBack();
-    if (index.current >= memes.length) {
+    if (index >= memes.length) {
-      index.current = memes.length - 1;
+      setIndex(memes.length - 1);
       flashListRef.current?.scrollToIndex({ index: memes.length - 1 });
     }
   }, [index, memes.length, navigation]);
@@ -94,19 +94,19 @@ const MemeView = ({
       <Appbar.Header style={memeViewStyles.header}>
         <Appbar.BackAction onPress={() => navigation.goBack()} />
         {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
-        <Appbar.Content title={memes[index.current]?.title} />
+        <Appbar.Content title={memes[index]?.title} />
       </Appbar.Header>
       <FlashList
         ref={flashListRef}
         key={height}
         data={memes}
-        initialScrollIndex={index.current}
+        initialScrollIndex={index}
         onScroll={event => {
           const newIndex = Math.round(
             event.nativeEvent.contentOffset.x /
               event.nativeEvent.layoutMeasurement.width,
           );
-          if (newIndex !== index.current) index.current = newIndex;
+          if (newIndex !== index) setIndex(newIndex);
         }}
         estimatedItemSize={width}
         estimatedListSize={{ height, width }}
@@ -126,14 +126,14 @@ const MemeView = ({
       <Appbar style={memeViewStyles.footer}>
         <Appbar.Action
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          icon={memes[index.current]?.isFavorite ? 'heart' : 'heart-outline'}
+          icon={memes[index]?.isFavorite ? 'heart' : 'heart-outline'}
-          onPress={() => favoriteMeme(realm, memes[index.current])}
+          onPress={() => favoriteMeme(realm, memes[index])}
           disabled={isBlocked}
         />
         <Appbar.Action
           icon="share"
           onPress={() => {
-            shareMeme(realm, storageUri, memes[index.current]).catch(() =>
+            shareMeme(realm, storageUri, memes[index]).catch(() =>
               setSnackbarMessage('Failed to share meme!'),
             );
           }}
@@ -142,7 +142,7 @@ const MemeView = ({
         <Appbar.Action
           icon="content-copy"
           onPress={async () => {
-            await copyMeme(realm, storageUri, memes[index.current])
+            await copyMeme(realm, storageUri, memes[index])
               .then(() => setSnackbarMessage('Meme copied!'))
               .catch(() => setSnackbarMessage('Failed to copy meme!'));
           }}
@@ -151,7 +151,7 @@ const MemeView = ({
         <Appbar.Action
           icon="pencil"
           onPress={() => {
-            editMeme(navigation, memes[index.current]);
+            editMeme(navigation, memes[index]);
           }}
           disabled={isBlocked}
         />
@@ -159,7 +159,7 @@ const MemeView = ({
           icon="delete"
           onPress={async () => {
             setIsBlocked(true);
-            await deleteMeme(realm, storageUri, memes[index.current]);
+            await deleteMeme(realm, storageUri, memes[index]);
             setIsBlocked(false);
           }}
           disabled={isBlocked}