From f3134bbe9b8bc84a906ca1dac46959b360dd243f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 16 Jun 2021 01:58:59 -0700 Subject: image cropper dump --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'package.json') diff --git a/package.json b/package.json index ea8c946a..5b07e8b3 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,8 @@ "react-native-haptic-feedback": "^1.11.0", "react-native-hyperlink": "^0.0.19", "react-native-image-crop-picker": "^0.36.0", + "react-native-image-crop-tools": "^1.3.6", + "react-native-image-picker": "^4.0.3", "react-native-image-resizer": "^1.4.4", "react-native-inappbrowser-reborn": "^3.5.0", "react-native-linear-gradient": "^2.5.6", @@ -105,4 +107,4 @@ "./node_modules/react-native-gesture-handler/jestSetup.js" ] } -} \ No newline at end of file +} -- cgit v1.2.3-70-g09d2 From 4258a121e87a7538f9f45a56b0e4fb76f1f395dd Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 17 Jun 2021 23:09:32 -0700 Subject: Add pan zoom library --- package.json | 1 + src/components/comments/ZoomInCropper.tsx | 30 ++++++++++++++++++++++++++++++ src/components/common/MomentTags.tsx | 28 +++++++++++++++------------- yarn.lock | 5 +++++ 4 files changed, 51 insertions(+), 13 deletions(-) create mode 100644 src/components/comments/ZoomInCropper.tsx (limited to 'package.json') diff --git a/package.json b/package.json index 5b07e8b3..01c79a37 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "react-native-hyperlink": "^0.0.19", "react-native-image-crop-picker": "^0.36.0", "react-native-image-crop-tools": "^1.3.6", + "react-native-image-pan-zoom": "^2.1.12", "react-native-image-picker": "^4.0.3", "react-native-image-resizer": "^1.4.4", "react-native-inappbrowser-reborn": "^3.5.0", diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx new file mode 100644 index 00000000..1620d777 --- /dev/null +++ b/src/components/comments/ZoomInCropper.tsx @@ -0,0 +1,30 @@ +import {RouteProp} from '@react-navigation/core'; +import {StackNavigationProp} from '@react-navigation/stack'; +import React from 'react'; +import {Image, Dimensions, Text} from 'react-native'; +import ImageZoom from 'react-native-image-pan-zoom'; +import {SCREEN_WIDTH} from '../../utils'; +import {MainStackParams} from '../../routes'; + +type ZoomInCropperRouteProps = RouteProp; + +interface ZoomInCropperProps { + route: ZoomInCropperRouteProps; +} + +export const ZoomInCropper: React.FC = ({route}) => { + return ( + + + + ); +}; diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index bdd1fbeb..4afacddb 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -66,19 +66,21 @@ const MomentTags: React.FC = ({ useEffect(() => { setTimeout( () => { - imageRef.current.measure( - ( - fx: number, // location of ref relative to parent element - fy: number, - width: number, - height: number, - _x: number, // location of ref relative to entire screen - _y: number, - ) => { - setOffset([fx, fy]); - setImageDimensions([width, height]); - }, - ); + if (imageRef && imageRef.current) { + imageRef.current.measure( + ( + fx: number, // location of ref relative to parent element + fy: number, + width: number, + height: number, + _x: number, // location of ref relative to entire screen + _y: number, + ) => { + setOffset([fx, fy]); + setImageDimensions([width, height]); + }, + ); + } }, editing ? 100 : 0, ); diff --git a/yarn.lock b/yarn.lock index c4c5ec2e..c7f8ff47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6450,6 +6450,11 @@ react-native-image-crop-tools@^1.3.6: resolved "https://registry.yarnpkg.com/react-native-image-crop-tools/-/react-native-image-crop-tools-1.3.6.tgz#c7060c61f6e81b64b9f279b5e9b2a42f35209d1a" integrity sha512-MXz+4k6SHwbvRHfifws9Jhd//rEQD5NC/2SKy80cRbc13XsWDA9bkIY396HCQrpwBT8zXLF7DjyTSEq+GqbBMg== +react-native-image-pan-zoom@^2.1.12: + version "2.1.12" + resolved "https://registry.yarnpkg.com/react-native-image-pan-zoom/-/react-native-image-pan-zoom-2.1.12.tgz#eb98bf56fb5610379bdbfdb63219cc1baca98fd2" + integrity sha512-BF66XeP6dzuANsPmmFsJshM2Jyh/Mo1t8FsGc1L9Q9/sVP8MJULDabB1hms+eAoqgtyhMr5BuXV3E1hJ5U5H6Q== + react-native-image-picker@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-4.0.3.tgz#dd8d393e0c57321688885c74b52244ad36e532d6" -- cgit v1.2.3-70-g09d2 From 5449a11f4c404e505ba4369bbdbefd73eeda0be3 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 18 Jun 2021 10:51:38 -0700 Subject: Add image manipulation for cropping --- ios/Podfile.lock | 10 ++++ package.json | 1 + src/components/comments/ZoomInCropper.tsx | 85 ++++++++++++++++++++++++++++--- src/components/moments/MomentPost.tsx | 2 +- src/components/profile/PublicProfile.tsx | 4 +- yarn.lock | 19 +++++++ 6 files changed, 113 insertions(+), 8 deletions(-) (limited to 'package.json') diff --git a/ios/Podfile.lock b/ios/Podfile.lock index eec8a988..d668122e 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -346,6 +346,9 @@ PODS: - React-Core - react-native-netinfo (6.0.0): - React-Core + - react-native-photo-manipulator (1.2.4): + - React + - WCPhotoManipulator (~> 2.0.4) - react-native-safe-area-context (3.2.0): - React-Core - react-native-splash-screen (3.2.0): @@ -484,6 +487,7 @@ PODS: - RNVectorIcons (7.1.0): - React - TOCropViewController (2.5.3) + - WCPhotoManipulator (2.0.4) - Yoga (1.14.0) - YogaKit (1.18.1): - Yoga (~> 1.14) @@ -536,6 +540,7 @@ DEPENDENCIES: - react-native-image-picker (from `../node_modules/react-native-image-picker`) - react-native-image-resizer (from `../node_modules/react-native-image-resizer`) - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)" + - react-native-photo-manipulator (from `../node_modules/react-native-photo-manipulator`) - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - react-native-splash-screen (from `../node_modules/react-native-splash-screen`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) @@ -593,6 +598,7 @@ SPEC REPOS: - OpenSSL-Universal - PromisesObjC - TOCropViewController + - WCPhotoManipulator - YogaKit EXTERNAL SOURCES: @@ -646,6 +652,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-image-resizer" react-native-netinfo: :path: "../node_modules/@react-native-community/netinfo" + react-native-photo-manipulator: + :path: "../node_modules/react-native-photo-manipulator" react-native-safe-area-context: :path: "../node_modules/react-native-safe-area-context" react-native-splash-screen: @@ -756,6 +764,7 @@ SPEC CHECKSUMS: react-native-image-picker: 474cf2c33c2b6671da53d293a16c97995f0aec15 react-native-image-resizer: 13ac4af788f88af36d0353a1324401ebabd04fe4 react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d + react-native-photo-manipulator: e44c14a28bf7c9b7657a0e0ac79327c1a4d8fe2c react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79 react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865 React-RCTActionSheet: 53ea72699698b0b47a6421cb1c8b4ab215a774aa @@ -786,6 +795,7 @@ SPEC CHECKSUMS: RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59 TOCropViewController: 20a14b6a7a098308bf369e7c8d700dc983a974e6 + WCPhotoManipulator: 45b7be19b75c9edf6d2b44f2f61dbc3673862a8f Yoga: 7d13633d129fd179e01b8953d38d47be90db185a YogaKit: f782866e155069a2cca2517aafea43200b01fd5a 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 54acc26e..79047b41 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -2,13 +2,21 @@ import {RouteProp} from '@react-navigation/core'; import {useFocusEffect} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useCallback, useEffect, useState} from 'react'; -import {Dimensions, Image, StyleSheet, TouchableOpacity} from 'react-native'; +import { + Dimensions, + Image, + StyleSheet, + TouchableOpacity, + View, +} 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 CloseIcon from '../../assets/ionicons/close-outline.svg'; import {MainStackParams} from '../../routes'; -import {HeaderHeight, SCREEN_WIDTH} from '../../utils'; -import {TaggSquareButton} from '../common'; +import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {LoadingIndicator, TaggSquareButton} from '../common'; +import PhotoManipulator from 'react-native-photo-manipulator'; +import {trackPromise} from 'react-promise-tracker'; type ZoomInCropperRouteProps = RouteProp; type ZoomInCropperNavigationProps = StackNavigationProp< @@ -51,6 +59,70 @@ export const ZoomInCropper: React.FC = ({ ); } }, []); + + 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(); + const [x1, setX1] = useState(); + const [y0, setY0] = useState(); + const [y1, setY1] = useState(); + + 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 ( <> = ({ cropWidth={Dimensions.get('window').width} cropHeight={Dimensions.get('window').height} imageWidth={SCREEN_WIDTH} - imageHeight={SCREEN_WIDTH / aspectRatio}> + imageHeight={SCREEN_WIDTH / aspectRatio} + onMove={onMove}> = ({ /> console.log('Navigate to caption screen')} + onPress={handleNext} title={'Next'} buttonStyle={'normal'} buttonColor={'blue'} diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 3840cb08..0f105c0d 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -115,7 +115,7 @@ const MomentPost: React.FC = ({ ); const [commentPreview, setCommentPreview] = useState(moment.comment_preview); - const {keyboardVisible, scrollTo} = useContext(MomentContext); + const {keyboardVisible} = useContext(MomentContext); const [hideText, setHideText] = useState(false); const [isFullScreen, setIsFullScreen] = useState(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 = ({ 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" -- cgit v1.2.3-70-g09d2 From 4cb6ccf53bc7bf6a6749e9b04c7e1dd057aab56e Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 22 Jun 2021 08:26:23 -0700 Subject: Remove image cropper created before new req --- package.json | 1 - src/components/comments/ImageCropper.tsx | 93 -------------------------------- yarn.lock | 5 -- 3 files changed, 99 deletions(-) delete mode 100644 src/components/comments/ImageCropper.tsx (limited to 'package.json') diff --git a/package.json b/package.json index 1617adec..300eec0c 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "react-native-haptic-feedback": "^1.11.0", "react-native-hyperlink": "^0.0.19", "react-native-image-crop-picker": "^0.36.0", - "react-native-image-crop-tools": "^1.3.6", "react-native-image-pan-zoom": "^2.1.12", "react-native-image-picker": "^4.0.3", "react-native-image-resizer": "^1.4.4", diff --git a/src/components/comments/ImageCropper.tsx b/src/components/comments/ImageCropper.tsx deleted file mode 100644 index 9edd5838..00000000 --- a/src/components/comments/ImageCropper.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import {RouteProp} from '@react-navigation/core'; -import {useFocusEffect} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useCallback, useRef, useState} from 'react'; -import {Button, StatusBar, View} from 'react-native'; -import {CropView} from 'react-native-image-crop-tools'; -import {MainStackParams} from '../../routes'; -import {HeaderHeight} from '../../utils'; - -type ImageCropperRouteProps = RouteProp; - -type ImageCropperNavigationProps = StackNavigationProp< - MainStackParams, - 'ImageCropper' ->; - -interface ImageCropperProps { - route: ImageCropperRouteProps; - navigation: ImageCropperNavigationProps; -} - -const ImageCropper: React.FC = ({route, navigation}) => { - const {image, title, screenType} = route.params; - const cropViewRef = useRef(); - const aspectRatios = [ - {width: 9, height: 16}, - {width: 4, height: 5}, - {width: 1, height: 1}, - ]; - const [aspectRatioIndex, setAspectRatioIndex] = useState(0); - //Function to get the parent TabBar navigator and setting the option for this screen. - useFocusEffect( - useCallback(() => { - navigation.dangerouslyGetParent()?.setOptions({ - tabBarVisible: false, - }); - return () => { - navigation.dangerouslyGetParent()?.setOptions({ - tabBarVisible: true, - }); - }; - }, [navigation]), - ); - return ( - <> - - -