diff options
| -rw-r--r-- | src/components/common/MomentTags.tsx | 2 | ||||
| -rw-r--r-- | src/components/moments/MomentPostContent.tsx | 51 | ||||
| -rw-r--r-- | src/screens/profile/IndividualMoment.tsx | 5 |
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'; |