diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/comments/ZoomInCropper.tsx | 61 | ||||
| -rw-r--r-- | src/components/moments/MomentCommentPreview.tsx | 8 | ||||
| -rw-r--r-- | src/components/moments/MomentPost.tsx | 1 | ||||
| -rw-r--r-- | src/screens/moments/TagFriendsScreen.tsx | 2 |
4 files changed, 47 insertions, 25 deletions
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index 54acc26e..d238d6ae 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -1,13 +1,18 @@ import {RouteProp} from '@react-navigation/core'; -import {useFocusEffect} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useCallback, useEffect, useState} from 'react'; -import {Dimensions, Image, StyleSheet, TouchableOpacity} from 'react-native'; +import React, {useEffect, useState} from 'react'; +import { + Dimensions, + Image, + StyleSheet, + TouchableOpacity, + Alert, +} from 'react-native'; import {normalize} from 'react-native-elements'; import ImageZoom from 'react-native-image-pan-zoom'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {MainStackParams} from '../../routes'; -import {HeaderHeight, SCREEN_WIDTH} from '../../utils'; +import {HeaderHeight, SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils'; import {TaggSquareButton} from '../common'; type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>; @@ -27,18 +32,11 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({ const {screenType, title, image} = route.params; const [aspectRatio, setAspectRatio] = useState<number>(1); - useFocusEffect( - useCallback(() => { - navigation.dangerouslyGetParent()?.setOptions({ - tabBarVisible: false, - }); - return () => { - navigation.dangerouslyGetParent()?.setOptions({ - tabBarVisible: true, - }); - }; - }, [navigation]), - ); + useEffect(() => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: false, + }); + }, []); useEffect(() => { if (image.sourceURL) { @@ -59,11 +57,22 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({ <CloseIcon height={25} width={25} color={'white'} /> </TouchableOpacity> <ImageZoom - style={{backgroundColor: 'black'}} - cropWidth={Dimensions.get('window').width} - cropHeight={Dimensions.get('window').height} + style={{backgroundColor: 'white'}} + cropWidth={SCREEN_WIDTH} + cropHeight={SCREEN_HEIGHT} imageWidth={SCREEN_WIDTH} - imageHeight={SCREEN_WIDTH / aspectRatio}> + imageHeight={SCREEN_WIDTH / aspectRatio} + onMove={(position) => + console.log( + 'hi', + position.positionX, + position.positionY, + position.scale, + position.zoomCurrentDistance, + SCREEN_WIDTH, + SCREEN_HEIGHT, + ) + }> <Image style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}} source={{ @@ -72,7 +81,17 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({ /> </ImageZoom> <TaggSquareButton - onPress={() => console.log('Navigate to caption screen')} + onPress={() => { + if (image && image.filename && image.sourceURL) { + navigation.navigate('CaptionScreen', { + screenType, + title: title, + image: {filename: image.filename, path: image.sourceURL}, + }); + } else { + Alert.alert('Invalid image file.'); + } + }} title={'Next'} buttonStyle={'normal'} buttonColor={'blue'} diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx index e53ed258..232568f1 100644 --- a/src/components/moments/MomentCommentPreview.tsx +++ b/src/components/moments/MomentCommentPreview.tsx @@ -23,7 +23,9 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({ const navigation = useNavigation(); const state = useStore().getState(); const commentCountText = - commentsCount === 0 ? 'No Comments' : commentsCount + ' comments'; + !commentsCount || commentsCount === 0 + ? 'No Comments' + : commentsCount + ' comments'; return ( <TouchableOpacity @@ -35,7 +37,7 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({ }) }> <Text style={styles.whiteBold}>{commentCountText}</Text> - {commentPreview !== null && ( + {commentPreview && ( <View style={styles.previewContainer}> <Image source={{ @@ -50,7 +52,7 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({ {renderTextWithMentions({ value: commentPreview.comment, styles: styles.normalFont, - partTypes: mentionPartTypes('white'), + partTypes: mentionPartTypes('white', 'comment'), onPress: (user: UserType) => navigateToProfile( state, diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 3840cb08..427ef09a 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -264,6 +264,7 @@ const MomentPost: React.FC<MomentPostProps> = ({ }, ]} resizeMode={'cover'} + ref={imageRef} /> <View style={{ diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 6956dc0d..570c3776 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -86,7 +86,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { ref={imageRef} style={styles.image} source={{uri: imagePath}} - resizeMode={'contain'} + resizeMode={'cover'} /> </TouchableWithoutFeedback> {tags.length !== 0 && ( |