diff options
| -rw-r--r-- | src/screens/moments/TagFriendsScreen.tsx | 56 |
1 files changed, 43 insertions, 13 deletions
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index f505b64f..d4a1733f 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -1,28 +1,29 @@ import {RouteProp} from '@react-navigation/core'; import {useNavigation} from '@react-navigation/native'; import React, {useCallback, useEffect, useRef, useState} from 'react'; -import {Image, StyleSheet, TouchableWithoutFeedback, View} from 'react-native'; +import { + Image, + StyleSheet, + TouchableOpacity, + 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, - SearchBackground, -} from '../../components'; +import {CaptionScreenHeader, MomentTags} from '../../components'; import {TagFriendsFooter} from '../../components/moments'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; import {MomentTagType} from '../../types'; import { SCREEN_WIDTH, - StatusBarHeight, SCREEN_HEIGHT, HeaderHeight, isIPhoneX, + normalize, } from '../../utils'; -import {TouchableOpacity} from 'react-native-gesture-handler'; type TagFriendsScreenRouteProps = RouteProp< MainStackParams, @@ -39,6 +40,19 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { const [imageWidth, setImageWidth] = useState<number>(0); const [imageHeight, setImageHeight] = useState<number>(0); + // Calculate boundary (if any) for drag from bottom + let bottomBound; + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { + bottomBound = SCREEN_HEIGHT * 0.15; + } else { + bottomBound = + SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2); + } + } else { + bottomBound = 0; + } + /* * Update list of tagged users from route params */ @@ -156,9 +170,17 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { </TouchableWithoutFeedback> </View> <TouchableOpacity - onPress={() => navigation.goBack()} + onPress={() => { + navigation.goBack(); + }} style={styles.backArrow}> - <BackArrow width={20} height={20} color={'white'} /> + <View style={styles.backArrowContainer}> + <BackArrow + height={normalize(18)} + width={normalize(18)} + color={'white'} + /> + </View> </TouchableOpacity> {tags.length !== 0 && ( <View style={styles.buttonContainer}> @@ -190,7 +212,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { deleteFromList={(user) => setTags(tags.filter((tag) => tag.user.id !== user.id)) } - boundaries={{bottom: SCREEN_HEIGHT * 0.15}} + boundaries={{bottom: bottomBound}} /> )} {tags.length !== 0 && ( @@ -206,11 +228,17 @@ const styles = StyleSheet.create({ contentContainer: { backgroundColor: 'black', height: SCREEN_HEIGHT, + // justifyContent: 'center', + alignContent: 'center', }, backArrow: { marginLeft: '5%', marginTop: isIPhoneX() ? HeaderHeight : '10%', position: 'absolute', + zIndex: 9999, + }, + backArrowContainer: { + flex: 1, }, button: { zIndex: 9999, @@ -223,11 +251,13 @@ const styles = StyleSheet.create({ }, captionContainer: { marginVertical: 20, - position: 'absolute', + // position: 'absolute', marginTop: SCREEN_HEIGHT * 0.2, flexDirection: 'row', justifyContent: 'center', - width: SCREEN_WIDTH, + // width: SCREEN_WIDTH, + borderWidth: 4, + borderColor: 'pink', }, shareButtonTitle: { fontWeight: 'bold', |