diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/components/comments/ZoomInCropper.tsx | 30 | ||||
| -rw-r--r-- | src/components/common/MomentTags.tsx | 28 | ||||
| -rw-r--r-- | yarn.lock | 5 |
4 files changed, 51 insertions, 13 deletions
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<MainStackParams, 'ZoomInCropper'>; + +interface ZoomInCropperProps { + route: ZoomInCropperRouteProps; +} + +export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({route}) => { + return ( + <ImageZoom + cropWidth={Dimensions.get('window').width} + cropHeight={Dimensions.get('window').height} + imageWidth={200} + imageHeight={200}> + <Image + style={{width: 200, height: 200}} + source={{ + uri: route.params.imageURI, + }} + /> + </ImageZoom> + ); +}; 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<MomentTagsProps> = ({ 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, ); @@ -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" |