From a6e98c1031a9e1c1bb03dd848f39e5afd8f28cb5 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 26 May 2021 15:58:06 -0400
Subject: Add icon and calculation

---
 src/assets/icons/tag_indicate.png            | Bin 0 -> 101301 bytes
 src/components/moments/MomentPostContent.tsx |  69 +++++++++++++--------------
 2 files changed, 34 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/icons/tag_indicate.png

(limited to 'src')

diff --git a/src/assets/icons/tag_indicate.png b/src/assets/icons/tag_indicate.png
new file mode 100644
index 00000000..7947aef7
Binary files /dev/null and b/src/assets/icons/tag_indicate.png differ
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 6953dca4..97bf2a0b 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,8 +1,6 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
-import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
-import Animated, {Easing} from 'react-native-reanimated';
 import {useDispatch, useStore} from 'react-redux';
 import {getCommentsCount, loadMomentTags} from '../../services';
 import {RootState} from '../../store/rootReducer';
@@ -36,17 +34,27 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   const [elapsedTime, setElapsedTime] = useState('');
   const [comments_count, setCommentsCount] = useState('');
   const [tags, setTags] = useState<MomentTagType[]>([]);
-  const [visible, setVisible] = useState(false);
   const state: RootState = useStore().getState();
   const navigation = useNavigation();
   const dispatch = useDispatch();
   const imageRef = useRef(null);
-
-  const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
-    new Animated.Value(0),
-  );
+  const [imageDimensions, setImageDimensions] = useState([0, 0]);
 
   useEffect(() => {
+    setTimeout(() => {
+      imageRef.current.measure(
+        (
+          _fx: number,
+          _fy: number,
+          width: number,
+          height: number,
+          _x: number,
+          _y: number,
+        ) => {
+          setImageDimensions([width, height]);
+        },
+      );
+    }, 250);
     const loadTags = async () => {
       const response = await loadMomentTags(momentId);
       if (response) {
@@ -65,36 +73,24 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
     fetchCommentsCount();
   }, [dateTime, momentId]);
 
-  useEffect(() => {
-    const fade = async () => {
-      Animated.timing(fadeValue, {
-        toValue: 1,
-        duration: 250,
-        easing: Easing.linear,
-      }).start();
-    };
-    fade();
-  }, [fadeValue]);
-
   return (
     <View style={[styles.container, style]}>
-      <TouchableWithoutFeedback
-        onPress={() => {
-          setVisible(!visible);
-          setFadeValue(new Animated.Value(0));
-        }}>
+      <Image
+        ref={imageRef}
+        style={styles.image}
+        source={{uri: pathHash}}
+        resizeMode={'cover'}
+      />
+      {tags.length > 0 && (
         <Image
-          ref={imageRef}
-          style={styles.image}
-          source={{uri: pathHash}}
-          resizeMode={'cover'}
+          source={require('../../assets/icons/tag_indicate.png')}
+          style={[
+            styles.tagIcon,
+            {top: imageDimensions[1] - 30 - SCREEN_HEIGHT * 0.03},
+          ]}
         />
-      </TouchableWithoutFeedback>
-      {visible && (
-        <Animated.View style={[styles.tapTag, {opacity: fadeValue}]}>
-          <MomentTags editing={false} tags={tags} imageRef={imageRef} />
-        </Animated.View>
       )}
+      <MomentTags editing={false} tags={tags} imageRef={imageRef} />
       <View style={styles.footerContainer}>
         <CommentsCount
           commentsCount={comments_count}
@@ -123,9 +119,6 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     marginBottom: '3%',
   },
-  tapTag: {
-    position: 'absolute',
-  },
   footerContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -154,5 +147,11 @@ const styles = StyleSheet.create({
     lineHeight: normalize(15.51),
     letterSpacing: normalize(0.6),
   },
+  tagIcon: {
+    width: normalize(30),
+    height: normalize(30),
+    position: 'absolute',
+    left: normalize(20),
+  },
 });
 export default MomentPostContent;
-- 
cgit v1.2.3-70-g09d2