Add custom AnimatedImage component

This also fixes the white flashing when loading images

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

src/components/memes/memeEditor.tsx

@@ -3,8 +3,7 @@ import { HelperText, Text, TextInput, useTheme } from 'react-native-paper';
 import { Image } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks/lib/useImageDimensions';
-import LoadingView from '../loadingView';
-import { MemeFail, MemeTagSelector } from '.';
+import { MemeFail, MemeTagSelector, LoadingView } from '..';
 import { Tag } from '../../database';
 import { StringValidationResult, validateMemeTitle } from '../../utilities';
 

src/components/memes/memeViewItem.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
-import { ImageZoom } from '@likashefqet/react-native-image-zoom';
 import { StyleSheet, View } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
 import { AndroidScoped } from 'react-native-file-access';
-import LoadingView from '../loadingView';
-import { Meme } from '../../database';
-import MemeFail from './memeFail';
 import { useSelector } from 'react-redux';
+import { Meme } from '../../database';
 import { RootState } from '../../state';
+import { AnimatedImage, LoadingView, MemeFail } from '..';
 
 const memeViewItemStyles = StyleSheet.create({
   view: {
@@ -47,7 +45,7 @@ const MemeViewItem = ({ meme }: { meme: Meme }) => {
           iconSize={50}
         />
       ) : (
-        <ImageZoom
+        <AnimatedImage
           source={{ uri }}
           style={
             dimensions.aspectRatio > width / (height - 128)
@@ -61,7 +59,6 @@ const MemeViewItem = ({ meme }: { meme: Meme }) => {
                   height: height - 128,
                 }
           }
-          minScale={0.5}
         />
       )}
     </View>