Fade tags in/out on image click

3 files changed, 46 insertions, 12 deletions

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 04b0558b..8c91db4a 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -8,6 +8,7 @@ interface MomentTagsProps {
   tags: MomentTagType[];
   imageRef: MutableRefObject<null>;
   deleteFromList?: (user: ProfilePreviewType) => void;
+  onPress?: () => void;
 }
 
 const MomentTags: React.FC<MomentTagsProps> = ({
@@ -15,6 +16,7 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   tags,
   imageRef,
   deleteFromList,
+  onPress,
 }) => {
   const [offset, setOffset] = useState([0, 0]);
   const [curStart, setCurStart] = useState([0, 0]);
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index e702cb68..a20249e6 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,6 +1,14 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useRef, useState} from 'react';
-import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from 'react-native';
+import Animated, {Easing} from 'react-native-reanimated';
 import {useDispatch, useStore} from 'react-redux';
 import {getCommentsCount, loadMomentTags} from '../../services';
 import {RootState} from '../../store/rootReducer';
@@ -34,11 +42,16 @@ 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),
+  );
+
   useEffect(() => {
     const loadTags = async () => {
       const response = await loadMomentTags(momentId);
@@ -58,15 +71,37 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
     fetchCommentsCount();
   }, [dateTime, momentId]);
 
+  useEffect(() => {
+    const fade = async () => {
+      Animated.timing(fadeValue, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+      }).start();
+    };
+    fade();
+  }, [fadeValue]);
+
   return (
     <View style={[styles.container, style]}>
-      <Image
-        ref={imageRef}
-        style={styles.image}
-        source={{uri: pathHash}}
-        resizeMode={'cover'}
-      />
-      <MomentTags editing={false} tags={tags} imageRef={imageRef} />
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={() => {
+          setVisible(!visible);
+          setFadeValue(new Animated.Value(0));
+        }}>
+        <Image
+          ref={imageRef}
+          style={styles.image}
+          source={{uri: pathHash}}
+          resizeMode={'cover'}
+        />
+      </TouchableOpacity>
+      {visible && (
+        <Animated.View style={{opacity: fadeValue}}>
+          <MomentTags editing={false} tags={tags} imageRef={imageRef} />
+        </Animated.View>
+      )}
       <View style={styles.footerContainer}>
         <CommentsCount
           commentsCount={comments_count}
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 4baca5b2..515cbacf 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,17 +1,14 @@
-import AsyncStorage from '@react-native-community/async-storage';
 import {BlurView} from '@react-native-community/blur';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React from 'react';
-import {Alert, FlatList, StyleSheet, View} from 'react-native';
+import {FlatList, StyleSheet, View} from 'react-native';
 import {useSelector} from 'react-redux';
 import {
   IndividualMomentTitleBar,
   MomentPostContent,
   MomentPostHeader,
 } from '../../components';
-import {MOMENT_TAGS_ENDPOINT} from '../../constants';
-import {ERROR_SOMETHING_WENT_WRONG_REFRESH} from '../../constants/strings';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootreducer';
 import {MomentType} from '../../types';