From 09238510729cb6f82e7cd9b7c25113463a51da02 Mon Sep 17 00:00:00 2001
From: Djorkaeff Alexandre <djorkaeff.unb@gmail.com>
Date: Wed, 8 Jul 2020 16:38:09 -0300
Subject: [PATCH] [FIX] ImageViewer not recognising gestures after zoomed
 (#2261)

* [FIX] Zoomed in images must react to gestures

* AnimatedFastImage -> AnimatedImage

Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 .../ImageViewer/ImageViewer.android.js        | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/presentation/ImageViewer/ImageViewer.android.js b/app/presentation/ImageViewer/ImageViewer.android.js
index 9c3a29049..2cd8578bb 100644
--- a/app/presentation/ImageViewer/ImageViewer.android.js
+++ b/app/presentation/ImageViewer/ImageViewer.android.js
@@ -260,6 +260,21 @@ function bouncy(
 const WIDTH = 300;
 const HEIGHT = 300;
 
+class Image extends React.PureComponent {
+	static propTypes = {
+		imageComponentType: PropTypes.string
+	}
+
+	render() {
+		const { imageComponentType } = this.props;
+
+		const Component = ImageComponent(imageComponentType);
+
+		return <Component {...this.props} />;
+	}
+}
+const AnimatedImage = Animated.createAnimatedComponent(Image);
+
 // it was picked from https://github.com/software-mansion/react-native-reanimated/tree/master/Example/imageViewer
 // and changed to use FastImage animated component
 export class ImageViewer extends React.Component {
@@ -386,12 +401,9 @@ export class ImageViewer extends React.Component {
 
 	render() {
 		const {
-			uri, width, height, theme, imageComponentType, ...props
+			uri, width, height, imageComponentType, theme, ...props
 		} = this.props;
 
-		const Component = ImageComponent(imageComponentType);
-		const AnimatedFastImage = Animated.createAnimatedComponent(Component);
-
 		// The below two animated values makes it so that scale appears to be done
 		// from the top left corner of the image view instead of its center. This
 		// is required for the "scale focal point" math to work correctly
@@ -416,7 +428,7 @@ export class ImageViewer extends React.Component {
 							onGestureEvent={this._onPanEvent}
 							onHandlerStateChange={this._onPanEvent}
 						>
-							<AnimatedFastImage
+							<AnimatedImage
 								style={[
 									styles.image,
 									{
@@ -435,6 +447,7 @@ export class ImageViewer extends React.Component {
 										]
 									}
 								]}
+								imageComponentType={imageComponentType}
 								resizeMode='contain'
 								source={{ uri }}
 								{...props}