Fix moment poster preview clickable area

1 files changed, 56 insertions, 28 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 8a3cfacb..3840cb08 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -8,6 +8,7 @@ import {
   StyleSheet,
   Text,
   TouchableOpacity,
+  TouchableWithoutFeedback,
   View,
 } from 'react-native';
 import Animated, {EasingNode} from 'react-native-reanimated';
@@ -36,6 +37,7 @@ import {
 import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 import {AddComment} from '../comments';
 import CommentsCount from '../comments/CommentsCount';
+import {MomentTags} from '../common';
 import {MomentMoreInfoDrawer, TaggAvatar} from '../profile';
 interface MomentPostProps {
   moment: MomentPostType;
@@ -206,28 +208,36 @@ const MomentPost: React.FC<MomentPostProps> = ({
     );
   }, [tags]);
 
-  const MomentUserPreview = () => (
-    <TouchableOpacity
-      onPress={() =>
-        navigateToProfile(state, dispatch, navigation, screenType, user)
-      }
-      style={styles.header}>
-      <TaggAvatar
-        style={styles.avatar}
-        userXId={userXId}
-        screenType={screenType}
-        editable={false}
-      />
-      <Text style={styles.headerText}>{user.username}</Text>
-    </TouchableOpacity>
+  const MomentPosterPreview = () => (
+    <View style={styles.momentPosterContainer}>
+      <TouchableOpacity
+        onPress={() =>
+          navigateToProfile(state, dispatch, navigation, screenType, user)
+        }
+        style={styles.header}>
+        <TaggAvatar
+          style={styles.avatar}
+          userXId={userXId}
+          screenType={screenType}
+          editable={false}
+        />
+        <Text style={styles.headerText}>{user.username}</Text>
+      </TouchableOpacity>
+    </View>
   );
 
   const TagsIcon = () => {
-    return tags.length === 0 ? (
-      <Image
-        source={require('../../assets/icons/tag_indicate.png')}
-        style={styles.tagIcon}
-      />
+    return tags.length > 0 ? (
+      <TouchableWithoutFeedback
+        onPress={() => {
+          setVisible(!visible);
+          setFadeValue(new Animated.Value(0));
+        }}>
+        <Image
+          source={require('../../assets/icons/tag_indicate.png')}
+          style={styles.tagIcon}
+        />
+      </TouchableWithoutFeedback>
     ) : (
       <React.Fragment />
     );
@@ -285,6 +295,26 @@ const MomentPost: React.FC<MomentPostProps> = ({
               tags={tags}
             />
           </View>
+          {visible && (
+            <Animated.View
+              style={[
+                {
+                  opacity: fadeValue,
+                  height: isFullScreen
+                    ? SCREEN_HEIGHT
+                    : SCREEN_WIDTH / aspectRatio,
+                  width: SCREEN_WIDTH,
+                  marginBottom: '3%',
+                },
+              ]}>
+              <MomentTags
+                editing={false}
+                tags={tags}
+                setTags={() => null}
+                imageRef={imageRef}
+              />
+            </Animated.View>
+          )}
           <KeyboardAvoidingView
             behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
             keyboardVerticalOffset={-20}>
@@ -302,7 +332,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
                 }}>
                 <CommentsCount moment={moment} screenType={screenType} />
               </View>
-              <MomentUserPreview />
+              <MomentPosterPreview />
               {!hideText && (
                 <>
                   {moment.caption !== '' &&
@@ -354,7 +384,6 @@ const MomentPost: React.FC<MomentPostProps> = ({
 const styles = StyleSheet.create({
   postHeader: {},
   postContent: {
-    // minHeight: SCREEN_HEIGHT * 0.8,
     paddingBottom: normalize(20),
   },
   image: {
@@ -381,12 +410,6 @@ const styles = StyleSheet.create({
     marginBottom: normalize(5),
     width: SCREEN_WIDTH * 0.79,
   },
-  tapTag: {
-    position: 'absolute',
-    backgroundColor: 'red',
-    width: 100,
-    height: 100,
-  },
   tagIcon: {
     width: normalize(30),
     height: normalize(30),
@@ -404,12 +427,17 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: 'white',
     paddingHorizontal: '3%',
-    flex: 1,
   },
   header: {
     alignItems: 'center',
     flexDirection: 'row',
     marginBottom: normalize(15),
+    alignSelf: 'flex-start',
+  },
+  momentPosterContainer: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 });