From eebb463c49136395643d47b2b8597341cda4cbd8 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Mon, 24 May 2021 15:24:27 -0700 Subject: Fade tags in/out on image click --- src/components/common/MomentTags.tsx | 2 ++ src/components/moments/MomentPostContent.tsx | 51 +++++++++++++++++++++++----- src/screens/profile/IndividualMoment.tsx | 5 +-- 3 files changed, 46 insertions(+), 12 deletions(-) (limited to 'src') 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; deleteFromList?: (user: ProfilePreviewType) => void; + onPress?: () => void; } const MomentTags: React.FC = ({ @@ -15,6 +16,7 @@ const MomentTags: React.FC = ({ 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 = ({ const [elapsedTime, setElapsedTime] = useState(''); const [comments_count, setCommentsCount] = useState(''); const [tags, setTags] = useState([]); + const [visible, setVisible] = useState(false); const state: RootState = useStore().getState(); const navigation = useNavigation(); const dispatch = useDispatch(); const imageRef = useRef(null); + const [fadeValue, setFadeValue] = useState>( + new Animated.Value(0), + ); + useEffect(() => { const loadTags = async () => { const response = await loadMomentTags(momentId); @@ -58,15 +71,37 @@ const MomentPostContent: React.FC = ({ fetchCommentsCount(); }, [dateTime, momentId]); + useEffect(() => { + const fade = async () => { + Animated.timing(fadeValue, { + toValue: 1, + duration: 1000, + easing: Easing.linear, + }).start(); + }; + fade(); + }, [fadeValue]); + return ( - - + { + setVisible(!visible); + setFadeValue(new Animated.Value(0)); + }}> + + + {visible && ( + + + + )} Date: Mon, 24 May 2021 15:24:27 -0700 Subject: Fade tags in/out on image click --- src/components/common/MomentTags.tsx | 2 ++ src/components/moments/MomentPostContent.tsx | 51 +++++++++++++++++++++++----- 2 files changed, 45 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index defd4b4b..28942e8a 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -8,6 +8,7 @@ interface MomentTagsProps { tags: MomentTagType[]; imageRef: MutableRefObject; deleteFromList?: (user: ProfilePreviewType) => void; + onPress?: () => void; } const MomentTags: React.FC = ({ @@ -15,6 +16,7 @@ const MomentTags: React.FC = ({ 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 = ({ const [elapsedTime, setElapsedTime] = useState(''); const [comments_count, setCommentsCount] = useState(''); const [tags, setTags] = useState([]); + const [visible, setVisible] = useState(false); const state: RootState = useStore().getState(); const navigation = useNavigation(); const dispatch = useDispatch(); const imageRef = useRef(null); + const [fadeValue, setFadeValue] = useState>( + new Animated.Value(0), + ); + useEffect(() => { const loadTags = async () => { const response = await loadMomentTags(momentId); @@ -58,15 +71,37 @@ const MomentPostContent: React.FC = ({ fetchCommentsCount(); }, [dateTime, momentId]); + useEffect(() => { + const fade = async () => { + Animated.timing(fadeValue, { + toValue: 1, + duration: 1000, + easing: Easing.linear, + }).start(); + }; + fade(); + }, [fadeValue]); + return ( - - + { + setVisible(!visible); + setFadeValue(new Animated.Value(0)); + }}> + + + {visible && ( + + + + )} Date: Mon, 24 May 2021 15:40:47 -0700 Subject: Remove unnecessary prop, fix linting issue --- src/components/common/MomentTags.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 28942e8a..9fe451a1 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -16,7 +16,6 @@ const MomentTags: React.FC = ({ tags, imageRef, deleteFromList, - onPress, }) => { const [offset, setOffset] = useState([0, 0]); const [curStart, setCurStart] = useState([0, 0]); -- cgit v1.2.3-70-g09d2 From 46f82a43bfb3312a82a2f08affb7ca57d0345b79 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Mon, 24 May 2021 15:46:05 -0700 Subject: Remove unnecessary prop, fix linting issue --- src/components/common/MomentTags.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 28942e8a..9fe451a1 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -16,7 +16,6 @@ const MomentTags: React.FC = ({ tags, imageRef, deleteFromList, - onPress, }) => { const [offset, setOffset] = useState([0, 0]); const [curStart, setCurStart] = useState([0, 0]); -- cgit v1.2.3-70-g09d2 From 4723abb677dca97a9f0ac1c50084ba8902a31e36 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Tue, 25 May 2021 11:38:26 -0700 Subject: Fix positioning --- src/components/common/MomentTags.tsx | 1 - src/components/moments/MomentPostContent.tsx | 22 +++++++++------------- 2 files changed, 9 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 9fe451a1..defd4b4b 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -8,7 +8,6 @@ interface MomentTagsProps { tags: MomentTagType[]; imageRef: MutableRefObject; deleteFromList?: (user: ProfilePreviewType) => void; - onPress?: () => void; } const MomentTags: React.FC = ({ diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index a20249e6..6953dca4 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -1,13 +1,7 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useRef, useState} from 'react'; -import { - Image, - StyleSheet, - Text, - TouchableOpacity, - View, - ViewProps, -} from 'react-native'; +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'; @@ -75,7 +69,7 @@ const MomentPostContent: React.FC = ({ const fade = async () => { Animated.timing(fadeValue, { toValue: 1, - duration: 1000, + duration: 250, easing: Easing.linear, }).start(); }; @@ -84,8 +78,7 @@ const MomentPostContent: React.FC = ({ return ( - { setVisible(!visible); setFadeValue(new Animated.Value(0)); @@ -96,9 +89,9 @@ const MomentPostContent: React.FC = ({ source={{uri: pathHash}} resizeMode={'cover'} /> - + {visible && ( - + )} @@ -130,6 +123,9 @@ const styles = StyleSheet.create({ aspectRatio: 1, marginBottom: '3%', }, + tapTag: { + position: 'absolute', + }, footerContainer: { flexDirection: 'row', justifyContent: 'space-between', -- cgit v1.2.3-70-g09d2 From 35bbe51f8c7d6e4abcda13ce2d68f942107552b7 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 25 May 2021 16:36:01 -0400 Subject: Remove normalize for image tip --- src/components/taggs/TaggDraggable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 55f8162b..12e8e1e1 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -81,7 +81,7 @@ const TaggDraggable: React.FC = ( const styles = StyleSheet.create({ imageTip: { - height: normalize(12), + height: 12, aspectRatio: 12 / 8, }, container: { -- cgit v1.2.3-70-g09d2