diff options
Diffstat (limited to 'src/screens')
| -rw-r--r-- | src/screens/moments/TagFriendsScreen.tsx | 159 |
1 files changed, 110 insertions, 49 deletions
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 201caf49..25105e6c 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -1,10 +1,12 @@ import {RouteProp} from '@react-navigation/core'; import {useNavigation} from '@react-navigation/native'; -import React, {useEffect, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useRef, useState} from 'react'; import {Image, StyleSheet, TouchableWithoutFeedback, View} from 'react-native'; +import {useFocusEffect} from '@react-navigation/native'; import {Button} from 'react-native-elements'; import Video from 'react-native-video'; import {MainStackParams} from 'src/routes'; +import BackArrow from '../../assets/icons/back-arrow.svg'; import { CaptionScreenHeader, MomentTags, @@ -13,7 +15,14 @@ import { import {TagFriendsFooter} from '../../components/moments'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; import {MomentTagType} from '../../types'; -import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import { + SCREEN_WIDTH, + StatusBarHeight, + SCREEN_HEIGHT, + HeaderHeight, + isIPhoneX, +} from '../../utils'; +import {TouchableOpacity} from 'react-native-gesture-handler'; type TagFriendsScreenRouteProps = RouteProp< MainStackParams, @@ -38,6 +47,22 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { }, [selectedTags]); /* + * Hide Tab Bar + */ + useFocusEffect( + useCallback(() => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: false, + }); + return () => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: true, + }); + }; + }, [navigation]), + ); + + /* * Navigate back to Tag Users Screen, send selected users */ const handleDone = () => { @@ -49,16 +74,17 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { const setMediaDimensions = (width: number, height: number) => { const imageAspectRatio = width / height; + const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT; // aspectRatio: >= 1 [Landscape] [1:1] - if (imageAspectRatio >= 1) { + if (imageAspectRatio >= screenRatio) { setImageWidth(SCREEN_WIDTH); setImageHeight(SCREEN_WIDTH / imageAspectRatio); } // aspectRatio: < 1 [Portrait] - if (imageAspectRatio < 1) { - setImageHeight(SCREEN_WIDTH); - setImageWidth(SCREEN_WIDTH * imageAspectRatio); + if (imageAspectRatio < screenRatio) { + setImageHeight(SCREEN_HEIGHT); + setImageWidth(SCREEN_HEIGHT * imageAspectRatio); } }; @@ -78,25 +104,12 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { }, []); return ( - <SearchBackground> - <View style={styles.contentContainer}> - <View style={styles.buttonsContainer}> - <Button - title="Cancel" - buttonStyle={styles.button} - onPress={() => navigation.goBack()} - /> - <Button - title="Done" - titleStyle={styles.shareButtonTitle} - buttonStyle={styles.button} - onPress={handleDone} - /> - </View> - <CaptionScreenHeader - style={styles.header} - title={'Tap on photo to tag friends!'} - /> + <View style={styles.contentContainer}> + <View + style={{ + position: 'absolute', + paddingTop: SCREEN_HEIGHT / 2 - imageHeight / 2, + }}> <TouchableWithoutFeedback onPress={() => navigation.navigate('TagSelectionScreen', { @@ -108,7 +121,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { style={{ width: imageWidth, height: imageHeight, - marginVertical: (SCREEN_WIDTH - imageHeight) / 2, marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2, }} ref={imageRef}> @@ -136,55 +148,104 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { style={{ width: imageWidth, height: imageHeight, - marginVertical: (SCREEN_WIDTH - imageHeight) / 2, marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2, }} source={{uri: media.uri}} /> )} </TouchableWithoutFeedback> - {tags.length !== 0 && ( - <MomentTags - tags={tags} - setTags={setTags} - editing={true} - imageRef={imageRef} - deleteFromList={(user) => - setTags(tags.filter((tag) => tag.user.id !== user.id)) - } + </View> + <TouchableOpacity + onPress={() => navigation.goBack()} + style={styles.backArrow}> + <BackArrow width={20} height={20} color={'white'} /> + </TouchableOpacity> + {tags.length !== 0 && ( + <View style={styles.buttonContainer}> + <Button + title="Done" + titleStyle={styles.shareButtonTitle} + type="clear" + buttonStyle={styles.button} + // iconContainerStyle={styles.button} + onPress={handleDone} /> - )} + </View> + )} + <View style={styles.captionContainer}> + <CaptionScreenHeader + style={styles.header} + title={ + tags.length === 0 + ? 'Tap on photo to tag friends!' + : 'Press and drag to move' + } + /> + </View> + {tags.length !== 0 && ( + <MomentTags + tags={tags} + setTags={setTags} + editing={true} + imageRef={imageRef} + deleteFromList={(user) => + setTags(tags.filter((tag) => tag.user.id !== user.id)) + } + boundaries={{bottom: SCREEN_HEIGHT * 0.15}} + /> + )} + {tags.length !== 0 && ( <View style={styles.footerContainer}> <TagFriendsFooter tags={tags} setTags={setTags} /> </View> - </View> - </SearchBackground> + )} + </View> ); }; const styles = StyleSheet.create({ contentContainer: { - paddingTop: StatusBarHeight, + backgroundColor: 'black', + height: SCREEN_HEIGHT, }, - buttonsContainer: { - flexDirection: 'row', - justifyContent: 'space-between', + backArrow: { marginLeft: '5%', - marginRight: '5%', + marginTop: isIPhoneX() ? HeaderHeight : '10%', + position: 'absolute', }, button: { - backgroundColor: 'transparent', + zIndex: 9999, + }, + buttonContainer: { + position: 'absolute', + marginTop: isIPhoneX() ? HeaderHeight : '10%', + right: 0, + marginRight: '5%', + }, + captionContainer: { + marginVertical: 20, + position: 'absolute', + marginTop: SCREEN_HEIGHT * 0.2, + flexDirection: 'row', + justifyContent: 'center', + width: SCREEN_WIDTH, }, shareButtonTitle: { fontWeight: 'bold', color: TAGG_LIGHT_BLUE_2, }, - header: { - marginVertical: 20, - }, + header: {}, footerContainer: { - marginHorizontal: '5%', marginTop: '3%', + backgroundColor: 'black', + padding: '5%', + flexDirection: 'column', + justifyContent: 'center', + width: SCREEN_WIDTH, + position: 'absolute', + paddingBottom: 0, + bottom: 0, + height: SCREEN_HEIGHT * 0.15, }, }); |