Add buttons, styles to ZoomInCropper Screen

1 files changed, 89 insertions, 16 deletions

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 1620d777..4e8f9e7c 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,30 +1,103 @@
 import {RouteProp} from '@react-navigation/core';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React from 'react';
-import {Image, Dimensions, Text} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {Dimensions, Image, StyleSheet, TouchableOpacity} from 'react-native';
+import {normalize} from 'react-native-elements';
 import ImageZoom from 'react-native-image-pan-zoom';
-import {SCREEN_WIDTH} from '../../utils';
+import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {MainStackParams} from '../../routes';
+import {HeaderHeight, SCREEN_WIDTH} from '../../utils';
+import {TaggSquareButton} from '../common';
 
 type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
-
+type ZoomInCropperNavigationProps = StackNavigationProp<
+  MainStackParams,
+  'ZoomInCropper'
+>;
 interface ZoomInCropperProps {
   route: ZoomInCropperRouteProps;
+  navigation: ZoomInCropperNavigationProps;
 }
 
-export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({route}) => {
+export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
+  route,
+  navigation,
+}) => {
+  const {screenType, title, image} = route.params;
+  const [aspectRatio, setAspectRatio] = useState<number>(1);
+
+  useEffect(() => {
+    navigation.dangerouslyGetParent()?.setOptions({
+      tabBarVisible: false,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (image.sourceURL) {
+      Image.getSize(
+        image.sourceURL,
+        (w, h) => {
+          setAspectRatio(w / h);
+        },
+        (err) => console.log(err),
+      );
+    }
+  }, []);
   return (
-    <ImageZoom
-      cropWidth={Dimensions.get('window').width}
-      cropHeight={Dimensions.get('window').height}
-      imageWidth={200}
-      imageHeight={200}>
-      <Image
-        style={{width: 200, height: 200}}
-        source={{
-          uri: route.params.imageURI,
-        }}
+    <>
+      <TouchableOpacity
+        style={styles.closeButton}
+        onPress={() => navigation.goBack()}>
+        <CloseIcon height={25} width={25} color={'white'} />
+      </TouchableOpacity>
+      <ImageZoom
+        style={{backgroundColor: 'black'}}
+        cropWidth={Dimensions.get('window').width}
+        cropHeight={Dimensions.get('window').height}
+        imageWidth={SCREEN_WIDTH}
+        imageHeight={SCREEN_WIDTH / aspectRatio}>
+        <Image
+          style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
+          source={{
+            uri: image.sourceURL,
+          }}
+        />
+      </ImageZoom>
+      <TaggSquareButton
+        onPress={() => console.log('Navigate to caption screen')}
+        title={'Next'}
+        buttonStyle={'normal'}
+        buttonColor={'blue'}
+        labelColor={'white'}
+        style={styles.button}
+        labelStyle={styles.buttonLabel}
       />
-    </ImageZoom>
+    </>
   );
 };
+
+const styles = StyleSheet.create({
+  closeButton: {
+    position: 'absolute',
+    top: 0,
+    paddingTop: HeaderHeight,
+    zIndex: 1,
+    marginLeft: '5%',
+  },
+  button: {
+    zIndex: 1,
+    position: 'absolute',
+    bottom: normalize(20),
+    right: normalize(15),
+    width: normalize(108),
+    height: normalize(25),
+    borderRadius: 10,
+  },
+  buttonLabel: {
+    fontWeight: '700',
+    fontSize: normalize(15),
+    lineHeight: normalize(17.8),
+    letterSpacing: normalize(1.3),
+    textAlign: 'center',
+  },
+});