diff options
| -rw-r--r-- | src/screens/moments/TagFriendsScreen.tsx | 88 |
1 files changed, 42 insertions, 46 deletions
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 69118660..81415437 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -47,26 +47,30 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { }); }; + const setMediaDimensions = (width: number, height: number) => { + const imageAspectRatio = width / height; + + // aspectRatio: >= 1 [Landscape] [1:1] + if (imageAspectRatio >= 1) { + setImageWidth(SCREEN_WIDTH); + setImageHeight(SCREEN_WIDTH / imageAspectRatio); + } + // aspectRatio: < 1 [Portrait] + if (imageAspectRatio < 1) { + setImageHeight(SCREEN_WIDTH); + setImageWidth(SCREEN_WIDTH * imageAspectRatio); + } + }; + /* - * Calculating image width and height with respect to it's enclosing view's dimensions + * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images. */ useEffect(() => { if (imageRef && imageRef.current) { Image.getSize( media.uri, (w, h) => { - const imageAspectRatio = w / h; - - // aspectRatio: >= 1 [Landscape] [1:1] - if (imageAspectRatio >= 1) { - setImageWidth(SCREEN_WIDTH); - setImageHeight(SCREEN_WIDTH / imageAspectRatio); - } - // aspectRatio: < 1 [Portrait] - else if (imageAspectRatio < 1) { - setImageHeight(SCREEN_WIDTH); - setImageWidth(SCREEN_WIDTH * imageAspectRatio); - } + setMediaDimensions(w, h); }, (err) => console.log(err), ); @@ -100,25 +104,36 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { }) }> {media.isVideo ? ( - <View style={styles.media} ref={imageRef}> + <View + style={{ + width: imageWidth, + height: imageHeight, + marginVertical: (SCREEN_WIDTH - imageHeight) / 2, + marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2, + }} + ref={imageRef}> <Video - style={styles.media} + style={{ + width: imageWidth, + height: imageHeight, + }} source={{uri: media.uri}} repeat={true} + onLoad={(response) => { + const {width, height} = response.naturalSize; + setMediaDimensions(width, height); + }} /> </View> ) : ( <Image ref={imageRef} - style={[ - { - width: imageWidth, - height: imageHeight, - marginVertical: (SCREEN_WIDTH - imageHeight) / 2, - marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2, - }, - styles.media, - ]} + style={{ + width: imageWidth, + height: imageHeight, + marginVertical: (SCREEN_WIDTH - imageHeight) / 2, + marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2, + }} source={{uri: media.uri}} /> )} @@ -162,29 +177,10 @@ const styles = StyleSheet.create({ header: { marginVertical: 20, }, - // media: { - // position: 'relative', - // width: SCREEN_WIDTH, - // aspectRatio: 1, - // marginBottom: '3%', - // }, - media: { - zIndex: 0, - justifyContent: 'center', - alignSelf: 'center', - }, - text: { - position: 'relative', - backgroundColor: 'white', - width: '100%', - paddingHorizontal: '2%', - paddingVertical: '1%', - height: 60, - }, - flex: { - flex: 1, + footerContainer: { + marginHorizontal: '5%', + marginTop: '3%', }, - footerContainer: {marginHorizontal: '5%', marginTop: '3%'}, }); export default TagFriendsScreen; |