docs: add todos

Author: geobako

README.md

@@ -22,7 +22,6 @@
 
 ![@georstat:react-native-image-gallery default_demo](https://user-images.githubusercontent.com/717975/142775046-475bfc3b-6326-4b3d-afa3-58189e003043.gif)
 
-
 ## Installation
 
 #### yarn:
@@ -68,12 +67,14 @@ const MyGallery = () => {
 ```
 
 #### Custom Gallery without thumbs:
+
 For more info check [example](https://github.com/georstat/react-native-image-gallery/tree/main/example/src)
 
 This example uses [georstat/react-native-image-cache](https://github.com/georstat/react-native-image-cache) for image caching
+
 ```tsx
-import {CacheManager, CachedImage} from '@georstat/react-native-image-cache';
-import {Dirs} from 'react-native-file-access';
+import { CacheManager, CachedImage } from '@georstat/react-native-image-cache';
+import { Dirs } from 'react-native-file-access';
 
 CacheManager.config = {
   baseDir: `${Dirs.CacheDir}/images_cache/`,
@@ -83,53 +84,53 @@ CacheManager.config = {
 };
 
 const MyGallery = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const openGallery = () => setIsOpen(true);
-    const closeGallery = () => setIsOpen(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const openGallery = () => setIsOpen(true);
+  const closeGallery = () => setIsOpen(false);
 
-    const renderHeaderComponent = (image: any, currentIndex: number) => {
-        return <Header currentIndex={currentIndex} />;
-    };
-
-    const renderFooterComponent = (image: any, currentIndex: number) => {
-      return <Footer total={images.length} currentIndex={currentIndex} />;
-    };
-
-    const renderCustomImage = (image: Image) => {
-      return (
-        <View style={styles.customImageContainer}>
-          <CachedImage
-            resizeMode="cover"
-            source={image.url}
-            style={styles.customImage}
-            thumbnailSource="https://via.placeholder.com/350x150"
-          />
-        </View>
-      );
-    };
+  const renderHeaderComponent = (image: any, currentIndex: number) => {
+    return <Header currentIndex={currentIndex} />;
+  };
+
+  const renderFooterComponent = (image: any, currentIndex: number) => {
+    return <Footer total={images.length} currentIndex={currentIndex} />;
+  };
+
+  const renderCustomImage = (image: Image) => {
     return (
-        <View>
-            <Button onPress={openGallery} title="Open Gallery" />
-            <ImageGallery
-              close={closeCustomGallery}
-              hideThumbs
-              images={images}
-              isOpen={isCustomGalleryOpen}
-              renderCustomImage={renderCustomImage}
-              renderFooterComponent={renderFooterComponent}
-              renderHeaderComponent={renderHeaderComponent}
-            />
-        </View>
-    )
-}
+      <View style={styles.customImageContainer}>
+        <CachedImage
+          resizeMode="cover"
+          source={image.url}
+          style={styles.customImage}
+          thumbnailSource="https://via.placeholder.com/350x150"
+        />
+      </View>
+    );
+  };
+  return (
+    <View>
+      <Button onPress={openGallery} title="Open Gallery" />
+      <ImageGallery
+        close={closeCustomGallery}
+        hideThumbs
+        images={images}
+        isOpen={isCustomGalleryOpen}
+        renderCustomImage={renderCustomImage}
+        renderFooterComponent={renderFooterComponent}
+        renderHeaderComponent={renderHeaderComponent}
+      />
+    </View>
+  );
+};
 ```
 
 ## Props
 
 #### `CachedImage` accepts the following props:
 
 | Properties              | PropType  | Description                                                                                                                                        |
-|-------------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------|
+| ----------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `isOpen`                | `Boolean` | (**Required**) when to show the gallery.                                                                                                           |
 | `images`                | `Array`   | (**Required**) array of objects. Every image must have a `url` (required), a thumbUrl (optional) and id (optional) and any other info you need     |
 | `resizeMode`            | `string`  | React Native Image component [resizeMode](https://reactnative.dev/docs/image#resizemode) defaults to `contain`, used on images                     |
@@ -144,6 +145,11 @@ const MyGallery = () => {
 | `renderHeaderComponent` | `Func`    | Function to render a custom header at the top of the screen. Accepts image and current index, eg. `(image:Image, currentIndex:number) => ...`      |
 | `renderFooterComponent` | `Func`    | Function to render a custom header at the top of the screen. Accepts image and current index eg. `(image:Image, currentIndex:number) => ...`       |
 
+## Todo:
+
+- Add zoom factor
+- Add prop to keep zoom and double tap to zoom out
+
 ## Authors:
 
 - [Efstathios Ntonas](https://github.com/efstathiosntonas)