Add layering functionality when editing tags

1 files changed, 33 insertions, 7 deletions

diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index e702cb68..df7f4e68 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,6 +1,8 @@
 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';
@@ -58,15 +60,36 @@ 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]}>
-      <Image
-        ref={imageRef}
-        style={styles.image}
-        source={{uri: pathHash}}
-        resizeMode={'cover'}
-      />
-      <MomentTags editing={false} tags={tags} imageRef={imageRef} />
+      <TouchableWithoutFeedback
+        onPress={() => {
+          setVisible(!visible);
+          setFadeValue(new Animated.Value(0));
+        }}>
+        <Image
+          ref={imageRef}
+          style={styles.image}
+          source={{uri: pathHash}}
+          resizeMode={'cover'}
+        />
+      </TouchableWithoutFeedback>
+      {visible && (
+        <Animated.View style={[styles.tapTag, {opacity: fadeValue}]}>
+          <MomentTags editing={false} tags={tags} imageRef={imageRef} />
+        </Animated.View>
+      )}
       <View style={styles.footerContainer}>
         <CommentsCount
           commentsCount={comments_count}
@@ -95,6 +118,9 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     marginBottom: '3%',
   },
+  tapTag: {
+    position: 'absolute',
+  },
   footerContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',