aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json1
-rw-r--r--src/components/comments/ZoomInCropper.tsx105
-rw-r--r--src/components/moments/MomentPost.tsx2
-rw-r--r--src/components/profile/PublicProfile.tsx4
-rw-r--r--yarn.lock19
5 files changed, 96 insertions, 35 deletions
diff --git a/package.json b/package.json
index 01c79a37..1617adec 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
"react-native-image-resizer": "^1.4.4",
"react-native-inappbrowser-reborn": "^3.5.0",
"react-native-linear-gradient": "^2.5.6",
+ "react-native-photo-manipulator": "^1.2.4",
"react-native-picker-select": "^7.0.0",
"react-native-push-notifications": "^3.0.10",
"react-native-reanimated": "2.0.0-rc.0",
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index d238d6ae..4b35464c 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,18 +1,13 @@
import {RouteProp} from '@react-navigation/core';
import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useEffect, useState} from 'react';
-import {
- Dimensions,
- Image,
- StyleSheet,
- TouchableOpacity,
- Alert,
-} from 'react-native';
+import {default as React, useEffect, useState} from 'react';
+import {Image, StyleSheet, TouchableOpacity} from 'react-native';
import {normalize} from 'react-native-elements';
-import ImageZoom from 'react-native-image-pan-zoom';
+import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
+import PhotoManipulator from 'react-native-photo-manipulator';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
import {MainStackParams} from '../../routes';
-import {HeaderHeight, SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {TaggSquareButton} from '../common';
type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
@@ -49,6 +44,70 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
);
}
}, []);
+
+ const handleNext = () => {
+ console.log('x0: ', x0, 'x1: ', x1, 'y0: ', y0, 'y1: ', y1);
+ if (
+ x0 !== undefined &&
+ x1 !== undefined &&
+ y0 !== undefined &&
+ y1 !== undefined &&
+ image.sourceURL
+ ) {
+ console.log('x0x1y0y1');
+ PhotoManipulator.crop(image.sourceURL, {
+ x: x0,
+ y: y1,
+ width: Math.abs(x0 - x1),
+ height: Math.abs(y0 - y1),
+ })
+ .then((croppedURL) => console.log('croppedURL: ', croppedURL))
+ .catch((err) => console.log('err: ', err));
+ }
+ console.log('crop photo and send to caption screen');
+ };
+
+ const [x0, setX0] = useState<number>();
+ const [x1, setX1] = useState<number>();
+ const [y0, setY0] = useState<number>();
+ const [y1, setY1] = useState<number>();
+
+ const onMove = (position: IOnMove) => {
+ Image.getSize(
+ image.path,
+ (w, h) => {
+ const x = position.positionX;
+ const y = position.positionY;
+ const scale = position.scale;
+ const screen_ratio = SCREEN_HEIGHT / SCREEN_WIDTH;
+ let x0 = w / 2 - x * (w / SCREEN_WIDTH) - w / 2 / scale;
+ let x1 = w / 2 - x * (w / SCREEN_WIDTH) + w / 2 / scale;
+ if (x0 < 0) {
+ x0 = 0;
+ }
+ if (x1 > w) {
+ x1 = w;
+ }
+ const x_distance = Math.abs(x1 - x0);
+ const y_distance = screen_ratio * x_distance;
+ let y0 = h / 2 - y * (h / SCREEN_HEIGHT) + y_distance / 2;
+ let y1 = h / 2 - y * (h / SCREEN_HEIGHT) - y_distance / 2;
+ if (y0 > h) {
+ y0 = h;
+ }
+ if (y1 < 0) {
+ y1 = 0;
+ }
+ console.log('onMove x0: ', x0, 'x1: ', x1, 'y0: ', y0, 'y1: ', y1);
+ setX0(x0);
+ setX1(x1);
+ setY0(y0);
+ setY1(y1);
+ },
+ (err) => console.log(err),
+ );
+ };
+
return (
<>
<TouchableOpacity
@@ -57,22 +116,12 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
<CloseIcon height={25} width={25} color={'white'} />
</TouchableOpacity>
<ImageZoom
- style={{backgroundColor: 'white'}}
+ style={{backgroundColor: 'black'}}
cropWidth={SCREEN_WIDTH}
cropHeight={SCREEN_HEIGHT}
imageWidth={SCREEN_WIDTH}
imageHeight={SCREEN_WIDTH / aspectRatio}
- onMove={(position) =>
- console.log(
- 'hi',
- position.positionX,
- position.positionY,
- position.scale,
- position.zoomCurrentDistance,
- SCREEN_WIDTH,
- SCREEN_HEIGHT,
- )
- }>
+ onMove={onMove}>
<Image
style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
source={{
@@ -81,17 +130,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
/>
</ImageZoom>
<TaggSquareButton
- 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.');
- }
- }}
+ onPress={handleNext}
title={'Next'}
buttonStyle={'normal'}
buttonColor={'blue'}
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 427ef09a..1a0dc981 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -115,7 +115,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
);
const [commentPreview, setCommentPreview] =
useState<MomentCommentPreviewType | null>(moment.comment_preview);
- const {keyboardVisible, scrollTo} = useContext(MomentContext);
+ const {keyboardVisible} = useContext(MomentContext);
const [hideText, setHideText] = useState(false);
const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx
index 8a80c56f..6b991d7c 100644
--- a/src/components/profile/PublicProfile.tsx
+++ b/src/components/profile/PublicProfile.tsx
@@ -87,7 +87,9 @@ const PublicProfile: React.FC<ContentProps> = ({
scrollViewRef.current
) {
setScrollEnabled(false);
- scrollViewRef.current.scrollTo({y: 0});
+ if (scrollViewRef && scrollViewRef.current) {
+ scrollViewRef.current.scrollTo({y: 0});
+ }
navigation.navigate('MomentUploadPrompt', {
screenType,
momentCategory: momentCategories[0],
diff --git a/yarn.lock b/yarn.lock
index c7f8ff47..8b270336 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2303,6 +2303,11 @@ color-convert@^2.0.1:
dependencies:
color-name "~1.1.4"
+color-convert@~0.5.0:
+ version "0.5.3"
+ resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+ integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
+
color-name@1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -6018,6 +6023,13 @@ parent-module@^1.0.0:
dependencies:
callsites "^3.0.0"
+parse-color@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/parse-color/-/parse-color-1.0.0.tgz#7b748b95a83f03f16a94f535e52d7f3d94658619"
+ integrity sha1-e3SLlag/A/FqlPU15S1/PZRlhhk=
+ dependencies:
+ color-convert "~0.5.0"
+
parse-json@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -6500,6 +6512,13 @@ react-native-markdown-package@1.8.1:
react-native-lightbox "^0.7.0"
simple-markdown "^0.7.1"
+react-native-photo-manipulator@^1.2.4:
+ version "1.2.4"
+ resolved "https://registry.yarnpkg.com/react-native-photo-manipulator/-/react-native-photo-manipulator-1.2.4.tgz#60da9c68c815695c43fa3ed8c77bd9f08d076158"
+ integrity sha512-EGkDxmVfom52G2jDWvY+rzzHVTlXLCfBs+IQut+VaH7TtShxQekzzqxFRr0Pch/0I5s6Vt+gjrhFZBIv7FweVg==
+ dependencies:
+ parse-color "^1.0.0"
+
react-native-picker-select@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/react-native-picker-select/-/react-native-picker-select-7.0.0.tgz#4808a1177f997e234bb8505849dfffe1a01fedac"
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 19:53:58 +0000