diff options
| -rw-r--r-- | ios/Podfile.lock | 4 | ||||
| -rw-r--r-- | src/components/common/MomentTags.tsx | 26 | ||||
| -rw-r--r-- | src/screens/moments/TagFriendsScreen.tsx | 48 |
3 files changed, 49 insertions, 29 deletions
diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 19df8c81..82a5b8a8 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -455,7 +455,7 @@ PODS: - React-Core - React-RCTImage - TOCropViewController - - RNInAppBrowser (3.6.1): + - RNInAppBrowser (3.6.3): - React-Core - RNReactNativeHapticFeedback (1.11.0): - React-Core @@ -801,7 +801,7 @@ SPEC CHECKSUMS: RNFS: 3ab21fa6c56d65566d1fb26c2228e2b6132e5e32 RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211 RNImageCropPicker: 35a3ceb837446fa11547704709bb22b5fac6d584 - RNInAppBrowser: 0523b3c15501fb8b54b4f32905d2e71ca902d914 + RNInAppBrowser: 3ff3a3b8f458aaf25aaee879d057352862edf357 RNReactNativeHapticFeedback: 653a8c126a0f5e88ce15ffe280b3ff37e1fbb285 RNReanimated: b9c929bfff7dedc9c89ab1875f1c6151023358d9 RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 36c87558..62b551f0 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -31,10 +31,8 @@ const MomentTags: React.FC<MomentTagsProps> = ({ const [imageDimensions, setImageDimensions] = useState([0, 0]); const [maxZIndex, setMaxZIndex] = useState(1); const [draggableRefs, setDraggableRefs] = useState<RefObject<View>[]>([]); - const [minXBoundary, setMinXBoundary] = useState<number>(0); - const [maxXBoundary, setMaxXBoundary] = useState<number>(0); - const [minYBoundary, setMinYBoundary] = useState<number>(0); - const [maxYBoundary, setMaxYBoundary] = useState<number>(0); + // [minXBoundary, maxXBoundary, minYBoundary, maxYBoundary] + const [boundariesList, setBoundariesList] = useState<number[]>([0, 0, 0, 0]); const updateTagPosition = (ref: RefObject<Image>, userId: string) => { if (ref !== null && ref.current !== null) { @@ -92,18 +90,22 @@ const MomentTags: React.FC<MomentTagsProps> = ({ // Checks for and adds boundaries if (boundaries) { + console.log(boundaries); + const newBounds = [...boundariesList]; if (boundaries.top) { - setMinYBoundary(boundaries.top); + newBounds[2] = boundaries.top; } if (boundaries.bottom) { - setMaxYBoundary(boundaries.bottom); + newBounds[3] = boundaries.bottom; } if (boundaries.left) { - setMinXBoundary(boundaries.left); + newBounds[0] = boundaries.left; } if (boundaries.right) { - setMaxXBoundary(boundaries.right); + newBounds[1] = boundaries.right; } + console.log(newBounds); + setBoundariesList(newBounds); } }, editing ? 100 : 0, @@ -122,10 +124,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({ x={(imageDimensions[0] * tag.x) / 100 + offset[0]} y={(imageDimensions[1] * tag.y) / 100 + offset[1]} z={tag.z} - minX={offset[0] + minXBoundary} - minY={offset[1] + minYBoundary} - maxX={imageDimensions[0] + offset[0] - maxXBoundary} - maxY={imageDimensions[1] + offset[1] - maxYBoundary} + minX={offset[0] + boundariesList[0]} + minY={offset[1] + boundariesList[2]} + maxX={imageDimensions[0] + offset[0] - boundariesList[1]} + maxY={imageDimensions[1] + offset[1] - boundariesList[3]} onDragStart={() => { const currZIndex = maxZIndex; setMaxZIndex(currZIndex + 1); diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 1852e6a6..5c3501bb 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -38,19 +38,8 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { const [tags, setTags] = useState<MomentTagType[]>([]); 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; - } + const [bottomBound, setBottomBound] = useState<number>(0); + const [topBound, setTopBound] = useState<number>(0); /* * Update list of tagged users from route params @@ -105,6 +94,21 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { }; /* + * Calculate boundary (if any) for drag from bottom + */ + useEffect(() => { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { + setBottomBound(SCREEN_HEIGHT * 0.15); + } else { + setBottomBound( + SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2), + ); + } + } + }, [imageHeight, imageWidth]); + + /* * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images. */ useEffect(() => { @@ -171,7 +175,21 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { )} </TouchableWithoutFeedback> </View> - <View style={styles.titleContainer}> + <View + style={styles.titleContainer} + onLayout={(event) => { + const {_x, y, _width, height} = event.nativeEvent.layout; + const tempBound = y + height; + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { + setTopBound(tempBound + 15); + } else { + setTopBound( + tempBound - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15, + ); + } + } + }}> <TouchableOpacity onPress={() => { navigation.goBack(); @@ -218,7 +236,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { deleteFromList={(user) => setTags(tags.filter((tag) => tag.user.id !== user.id)) } - boundaries={{bottom: bottomBound}} + boundaries={{top: topBound, bottom: bottomBound}} /> )} {tags.length !== 0 && ( |