From 98b11aebbc99ade873b7c8681ac38d6e0e72332c Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Sat, 12 Jun 2021 02:01:57 +0900 Subject: Alter location of suggested --- src/components/common/TaggTypeahead.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 747e0bb5..7379b5e0 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -67,15 +67,17 @@ const TaggTypeahead: React.FC = ({ const styles = StyleSheet.create({ container: { - marginLeft: SCREEN_WIDTH * 0.05, - width: SCREEN_WIDTH * 0.9, + // marginLeft: SCREEN_WIDTH * 0.05, + // marginLeft: 20, + // margin: 50, + width: SCREEN_WIDTH, maxHeight: 264, - borderRadius: 10, + // borderRadius: 10, backgroundColor: 'white', position: 'absolute', alignSelf: 'center', zIndex: 1, - borderWidth: 1, + // borderWidth: 1, }, }); -- cgit v1.2.3-70-g09d2 From 52ff7abbc60fc1eef1f8d67372de855ab09069a9 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Sat, 12 Jun 2021 03:37:38 +0900 Subject: Add grey background --- src/components/comments/AddComment.tsx | 2 + src/components/comments/MentionInputControlled.tsx | 10 ++++ src/components/common/TaggTypeahead.tsx | 59 ++++++++++++++-------- 3 files changed, 49 insertions(+), 22 deletions(-) (limited to 'src/components/common') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index c48ce627..c17fdd93 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -137,6 +137,8 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', width: SCREEN_WIDTH, + // paddingTop: 10, + // marginTop: 10, }, textContainer: { width: '95%', diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx index c52f3286..a3229bb0 100644 --- a/src/components/comments/MentionInputControlled.tsx +++ b/src/components/comments/MentionInputControlled.tsx @@ -27,6 +27,7 @@ import {Avatar} from '../common'; import {normalize} from 'react-native-elements'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; +import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils'; const MentionInputControlled: FC = ({ value, @@ -246,6 +247,15 @@ const styles = StyleSheet.create({ alignSelf: 'flex-end', }, text: {flex: 1}, + overlay: { + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, + backgroundColor: 'blue', + position: 'absolute', + left: 0, + bottom: 0, + zIndex: -1, + }, }); export {MentionInputControlled}; diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 7379b5e0..a7789881 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -1,12 +1,12 @@ import React, {Fragment, useEffect, useState} from 'react'; -import {ScrollView, StyleSheet} from 'react-native'; +import {ScrollView, StyleSheet, View} from 'react-native'; import {MentionSuggestionsProps} from 'react-native-controlled-mentions'; import {useSelector} from 'react-redux'; import {SEARCH_ENDPOINT_MESSAGES} from '../../constants'; import {loadSearchResults} from '../../services'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType} from '../../types'; -import {SCREEN_WIDTH, shuffle} from '../../utils'; +import {SCREEN_WIDTH, SCREEN_HEIGHT, shuffle} from '../../utils'; import TaggUserRowCell from './TaggUserRowCell'; const TaggTypeahead: React.FC = ({ @@ -42,26 +42,29 @@ const TaggTypeahead: React.FC = ({ } return ( - { - setHeight(event.nativeEvent.layout.height); - }} - keyboardShouldPersistTaps={'always'}> - {results.map((user) => ( - { - setResults([]); - onSuggestionPress({ - id: user.id, - name: user.username, - }); - }} - user={user} - /> - ))} - + + + { + setHeight(event.nativeEvent.layout.height); + }} + keyboardShouldPersistTaps={'always'}> + {results.map((user) => ( + { + setResults([]); + onSuggestionPress({ + id: user.id, + name: user.username, + }); + }} + user={user} + /> + ))} + + ); }; @@ -75,10 +78,22 @@ const styles = StyleSheet.create({ // borderRadius: 10, backgroundColor: 'white', position: 'absolute', + // bottom: 0, alignSelf: 'center', zIndex: 1, // borderWidth: 1, }, + overlay: { + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, + backgroundColor: 'gray', + opacity: 0.4, + position: 'absolute', + alignSelf: 'center', + // left: 0, + bottom: 0, + zIndex: -1, + }, }); export default TaggTypeahead; -- cgit v1.2.3-70-g09d2 From 5d8357b7e370a51a5f13b316582bcbcd595566d9 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 15 Jun 2021 01:17:40 +0900 Subject: Correct positioning --- src/components/comments/AddComment.tsx | 2 -- src/components/comments/MentionInputControlled.tsx | 42 ++++++++++++++-------- src/components/common/TaggTypeahead.tsx | 10 ++---- 3 files changed, 30 insertions(+), 24 deletions(-) (limited to 'src/components/common') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index c17fdd93..c48ce627 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -137,8 +137,6 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', width: SCREEN_WIDTH, - // paddingTop: 10, - // marginTop: 10, }, textContainer: { width: '95%', diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx index a3229bb0..c37d2182 100644 --- a/src/components/comments/MentionInputControlled.tsx +++ b/src/components/comments/MentionInputControlled.tsx @@ -1,17 +1,27 @@ -import React, {FC, MutableRefObject, useMemo, useRef, useState} from 'react'; +import React, { + FC, + MutableRefObject, + Ref, + useMemo, + useRef, + useState, +} from 'react'; import { NativeSyntheticEvent, StyleSheet, + StyleProp, Text, TextInput, + TextInputProps, TextInputSelectionChangeEventData, TouchableOpacity, View, + ViewStyle, } from 'react-native'; import {useDispatch, useSelector} from 'react-redux'; import {TAGG_LIGHT_BLUE} from '../../constants'; import { - MentionInputProps, + PatternPartType, MentionPartType, Suggestion, } from 'react-native-controlled-mentions/dist/types'; @@ -29,7 +39,22 @@ import {normalize} from 'react-native-elements'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils'; -const MentionInputControlled: FC = ({ +type PartType = MentionPartType | PatternPartType; + +type MentionInputControlledProps = Omit & { + value: string; + onChange: (value: string) => any; + + partTypes?: PartType[]; + + inputRef?: Ref; + + containerStyle?: StyleProp; + + addComment?: () => any; +}; + +const MentionInputControlled: FC = ({ value, onChange, @@ -225,14 +250,12 @@ const styles = StyleSheet.create({ marginRight: 10, marginLeft: '3%', marginVertical: '2%', - // alignSelf: 'flex-end', }, containerStyle: { flexDirection: 'row', alignSelf: 'center', alignItems: 'center', justifyContent: 'center', - // borderWidth: 1, height: normalize(40), }, submitButton: { @@ -247,15 +270,6 @@ const styles = StyleSheet.create({ alignSelf: 'flex-end', }, text: {flex: 1}, - overlay: { - width: SCREEN_WIDTH, - height: SCREEN_HEIGHT, - backgroundColor: 'blue', - position: 'absolute', - left: 0, - bottom: 0, - zIndex: -1, - }, }); export {MentionInputControlled}; diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index a7789881..6686b4d9 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -70,18 +70,13 @@ const TaggTypeahead: React.FC = ({ const styles = StyleSheet.create({ container: { - // marginLeft: SCREEN_WIDTH * 0.05, - // marginLeft: 20, - // margin: 50, width: SCREEN_WIDTH, maxHeight: 264, - // borderRadius: 10, backgroundColor: 'white', position: 'absolute', - // bottom: 0, alignSelf: 'center', zIndex: 1, - // borderWidth: 1, + margin: -10, }, overlay: { width: SCREEN_WIDTH, @@ -90,8 +85,7 @@ const styles = StyleSheet.create({ opacity: 0.4, position: 'absolute', alignSelf: 'center', - // left: 0, - bottom: 0, + bottom: 10, zIndex: -1, }, }); -- cgit v1.2.3-70-g09d2 From bc2c093e9342ed8deb98652d1c278417dd6435f3 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 15 Jun 2021 03:53:00 +0900 Subject: Fixed styles for comments vs captions --- src/components/comments/AddComment.tsx | 2 +- src/components/common/TaggTypeahead.tsx | 23 ++++++++++++++++++----- src/screens/profile/CaptionScreen.tsx | 2 +- src/utils/comments.tsx | 11 +++++++---- 4 files changed, 27 insertions(+), 11 deletions(-) (limited to 'src/components/common') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index c48ce627..db85d525 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -122,7 +122,7 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { ); }} inputRef={ref} - partTypes={mentionPartTypes('blue')} + partTypes={mentionPartTypes('blue', 'comment')} addComment={addComment} /> diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 6686b4d9..6b3df559 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -1,21 +1,35 @@ import React, {Fragment, useEffect, useState} from 'react'; import {ScrollView, StyleSheet, View} from 'react-native'; -import {MentionSuggestionsProps} from 'react-native-controlled-mentions'; +import {Suggestion} from 'react-native-controlled-mentions'; import {useSelector} from 'react-redux'; import {SEARCH_ENDPOINT_MESSAGES} from '../../constants'; import {loadSearchResults} from '../../services'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType} from '../../types'; -import {SCREEN_WIDTH, SCREEN_HEIGHT, shuffle} from '../../utils'; +import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils'; import TaggUserRowCell from './TaggUserRowCell'; -const TaggTypeahead: React.FC = ({ +type TaggTypeaheadProps = { + keyword: string | undefined; + component: string | undefined; + onSuggestionPress: (suggestion: Suggestion) => void; +}; + +const TaggTypeahead: React.FC = ({ keyword, + component, onSuggestionPress, }) => { const {friends} = useSelector((state: RootState) => state.friends); const [results, setResults] = useState([]); const [height, setHeight] = useState(0); + const [margin, setMargin] = useState(0); + + useEffect(() => { + if (component === 'comment') { + setMargin(-10); + } + }, [component]); useEffect(() => { if (keyword === '') { @@ -45,7 +59,7 @@ const TaggTypeahead: React.FC = ({ { setHeight(event.nativeEvent.layout.height); @@ -76,7 +90,6 @@ const styles = StyleSheet.create({ position: 'absolute', alignSelf: 'center', zIndex: 1, - margin: -10, }, overlay: { width: SCREEN_WIDTH, diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 8bffd82b..05095d16 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -167,7 +167,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { placeholderTextColor="gray" value={caption} onChange={setCaption} - partTypes={mentionPartTypes('blue')} + partTypes={mentionPartTypes('blue', 'caption')} /> diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx index 5c17cefe..80786b74 100644 --- a/src/utils/comments.tsx +++ b/src/utils/comments.tsx @@ -79,13 +79,16 @@ export const renderTextWithMentions: React.FC = ({ ); }; -export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = ( - style, -) => { +export const mentionPartTypes: ( + style: 'blue' | 'white', + component: 'caption' | 'comment', +) => PartType[] = (style, component) => { return [ { trigger: '@', - renderSuggestions: (props) => , + renderSuggestions: (props) => ( + + ), allowedSpacesCount: 0, isInsertSpaceAfterMention: true, textStyle: -- cgit v1.2.3-70-g09d2 From 6fcd7b41cd763e95733187c6c4d48ddb6e9bd01a Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 17 Jun 2021 16:21:57 +0900 Subject: Made edits --- src/components/comments/AddComment.tsx | 6 ++---- src/components/comments/CommentTextField.tsx | 23 +++++++++++------------ src/components/common/TaggTypeahead.tsx | 8 +------- src/components/moments/MomentCommentPreview.tsx | 2 +- 4 files changed, 15 insertions(+), 24 deletions(-) (limited to 'src/components/common') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index fd7d819a..8a4ec082 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -13,11 +13,10 @@ import {CommentContext} from '../../screens/profile/MomentCommentsScreen'; import {postComment} from '../../services'; import {updateReplyPosted} from '../../store/actions'; import {CommentThreadType, CommentType} from '../../types'; -import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {SCREEN_HEIGHT, SCREEN_WIDTH, normalize} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; import {CommentTextField} from './CommentTextField'; import MentionInputControlled from './MentionInputControlled'; -import {normalize} from 'react-native-elements'; export interface AddCommentProps { momentId: string; @@ -169,11 +168,10 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', margin: '3%', borderRadius: 25, - height: normalize(40), + height: normalize(45), }, text: { flex: 1, - // padding: '1%', maxHeight: 100, }, avatar: { diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx index a3a14ec8..6e92329c 100644 --- a/src/components/comments/CommentTextField.tsx +++ b/src/components/comments/CommentTextField.tsx @@ -23,7 +23,7 @@ import { isMentionPartType, } from 'react-native-controlled-mentions/dist/utils'; import {Avatar} from '../common'; -import {normalize} from 'react-native-elements'; +import {normalize} from '../../utils'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; @@ -115,16 +115,15 @@ const CommentTextField: FC = ({ )} - {validateInput(keyboardText) - ? ( - partTypes.filter( - (one) => - isMentionPartType(one) && - one.renderSuggestions != null && - one.isBottomMentionSuggestionsRender, - ) as MentionPartType[] - ).map(renderMentionSuggestions) - : null} + {validateInput(keyboardText) && + ( + partTypes.filter( + (one) => + isMentionPartType(one) && + one.renderSuggestions != null && + one.isBottomMentionSuggestionsRender, + ) as MentionPartType[] + ).map(renderMentionSuggestions)} ); }; @@ -143,7 +142,7 @@ const styles = StyleSheet.create({ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', - height: normalize(40), + height: normalize(45), }, greyButton: { backgroundColor: 'grey', diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 6b3df559..7967fdbc 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -23,13 +23,7 @@ const TaggTypeahead: React.FC = ({ const {friends} = useSelector((state: RootState) => state.friends); const [results, setResults] = useState([]); const [height, setHeight] = useState(0); - const [margin, setMargin] = useState(0); - - useEffect(() => { - if (component === 'comment') { - setMargin(-10); - } - }, [component]); + const margin = component === 'comment' ? -10 : 0; useEffect(() => { if (keyword === '') { diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx index d4729888..232568f1 100644 --- a/src/components/moments/MomentCommentPreview.tsx +++ b/src/components/moments/MomentCommentPreview.tsx @@ -52,7 +52,7 @@ const MomentCommentPreview: React.FC = ({ {renderTextWithMentions({ value: commentPreview.comment, styles: styles.normalFont, - partTypes: mentionPartTypes('white'), + partTypes: mentionPartTypes('white', 'comment'), onPress: (user: UserType) => navigateToProfile( state, -- cgit v1.2.3-70-g09d2 From 4258a121e87a7538f9f45a56b0e4fb76f1f395dd Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 17 Jun 2021 23:09:32 -0700 Subject: Add pan zoom library --- package.json | 1 + src/components/comments/ZoomInCropper.tsx | 30 ++++++++++++++++++++++++++++++ src/components/common/MomentTags.tsx | 28 +++++++++++++++------------- yarn.lock | 5 +++++ 4 files changed, 51 insertions(+), 13 deletions(-) create mode 100644 src/components/comments/ZoomInCropper.tsx (limited to 'src/components/common') diff --git a/package.json b/package.json index 5b07e8b3..01c79a37 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "react-native-hyperlink": "^0.0.19", "react-native-image-crop-picker": "^0.36.0", "react-native-image-crop-tools": "^1.3.6", + "react-native-image-pan-zoom": "^2.1.12", "react-native-image-picker": "^4.0.3", "react-native-image-resizer": "^1.4.4", "react-native-inappbrowser-reborn": "^3.5.0", diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx new file mode 100644 index 00000000..1620d777 --- /dev/null +++ b/src/components/comments/ZoomInCropper.tsx @@ -0,0 +1,30 @@ +import {RouteProp} from '@react-navigation/core'; +import {StackNavigationProp} from '@react-navigation/stack'; +import React from 'react'; +import {Image, Dimensions, Text} from 'react-native'; +import ImageZoom from 'react-native-image-pan-zoom'; +import {SCREEN_WIDTH} from '../../utils'; +import {MainStackParams} from '../../routes'; + +type ZoomInCropperRouteProps = RouteProp; + +interface ZoomInCropperProps { + route: ZoomInCropperRouteProps; +} + +export const ZoomInCropper: React.FC = ({route}) => { + return ( + + + + ); +}; diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index bdd1fbeb..4afacddb 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -66,19 +66,21 @@ const MomentTags: React.FC = ({ useEffect(() => { setTimeout( () => { - imageRef.current.measure( - ( - fx: number, // location of ref relative to parent element - fy: number, - width: number, - height: number, - _x: number, // location of ref relative to entire screen - _y: number, - ) => { - setOffset([fx, fy]); - setImageDimensions([width, height]); - }, - ); + if (imageRef && imageRef.current) { + imageRef.current.measure( + ( + fx: number, // location of ref relative to parent element + fy: number, + width: number, + height: number, + _x: number, // location of ref relative to entire screen + _y: number, + ) => { + setOffset([fx, fy]); + setImageDimensions([width, height]); + }, + ); + } }, editing ? 100 : 0, ); diff --git a/yarn.lock b/yarn.lock index c4c5ec2e..c7f8ff47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6450,6 +6450,11 @@ react-native-image-crop-tools@^1.3.6: resolved "https://registry.yarnpkg.com/react-native-image-crop-tools/-/react-native-image-crop-tools-1.3.6.tgz#c7060c61f6e81b64b9f279b5e9b2a42f35209d1a" integrity sha512-MXz+4k6SHwbvRHfifws9Jhd//rEQD5NC/2SKy80cRbc13XsWDA9bkIY396HCQrpwBT8zXLF7DjyTSEq+GqbBMg== +react-native-image-pan-zoom@^2.1.12: + version "2.1.12" + resolved "https://registry.yarnpkg.com/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.12.tgz#eb98bf56fb5610379bdbfdb63219cc1baca98fd2" + integrity sha512-BF66XeP6dzuANsPmmFsJshM2Jyh/Mo1t8FsGc1L9Q9/sVP8MJULDabB1hms+eAoqgtyhMr5BuXV3E1hJ5U5H6Q== + react-native-image-picker@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.0.3.tgz#dd8d393e0c57321688885c74b52244ad36e532d6" -- cgit v1.2.3-70-g09d2 From acc7081036177e036bd7f43c7975939d33e91f2c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 25 Jun 2021 17:05:14 -0400 Subject: Cleanup ref types --- src/components/common/MomentTags.tsx | 14 +++++--------- src/components/moments/MomentPost.tsx | 12 +++++++++++- src/components/taggs/TaggDraggable.tsx | 4 ++-- 3 files changed, 18 insertions(+), 12 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 4afacddb..d8a70353 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -1,4 +1,5 @@ -import React, {createRef, MutableRefObject, useEffect, useState} from 'react'; +import React, {createRef, RefObject, useEffect, useState} from 'react'; +import {Image, View} from 'react-native'; import {MomentTagType, ProfilePreviewType} from '../../types'; import TaggDraggable from '../taggs/TaggDraggable'; import Draggable from './Draggable'; @@ -7,7 +8,7 @@ interface MomentTagsProps { editing: boolean; tags: MomentTagType[]; setTags: (tag: MomentTagType[]) => void; - imageRef: MutableRefObject; + imageRef: RefObject; deleteFromList?: (user: ProfilePreviewType) => void; } @@ -21,14 +22,9 @@ const MomentTags: React.FC = ({ const [offset, setOffset] = useState([0, 0]); const [imageDimensions, setImageDimensions] = useState([0, 0]); const [maxZIndex, setMaxZIndex] = useState(1); - const [draggableRefs, setDraggableRefs] = useState< - React.MutableRefObject[] - >([]); + const [draggableRefs, setDraggableRefs] = useState[]>([]); - const updateTagPosition = ( - ref: React.MutableRefObject, - userId: string, - ) => { + const updateTagPosition = (ref: RefObject, userId: string) => { if (ref !== null && ref.current !== null) { ref.current.measure( ( diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index e6bb5405..7d0752d5 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -1,5 +1,13 @@ import {useNavigation} from '@react-navigation/native'; -import React, {useContext, useEffect, useRef, useState} from 'react'; +import React, { + createRef, + LegacyRef, + MutableRefObject, + useContext, + useEffect, + useRef, + useState, +} from 'react'; import { Image, KeyboardAvoidingView, @@ -72,6 +80,7 @@ const MomentPost: React.FC = ({ const [momentTagId, setMomentTagId] = useState(''); const imageRef = useRef(null); + const videoRef = useRef