[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>
This commit is contained in:
Djorkaeff Alexandre 2020-07-08 16:38:09 -03:00 committed by Diego Mello
parent 3be67f5a4f
commit be718db8a5
1 changed files with 18 additions and 5 deletions

View File

@ -260,6 +260,21 @@ function bouncy(
const WIDTH = 300; const WIDTH = 300;
const HEIGHT = 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 // it was picked from https://github.com/software-mansion/react-native-reanimated/tree/master/Example/imageViewer
// and changed to use FastImage animated component // and changed to use FastImage animated component
export class ImageViewer extends React.Component { export class ImageViewer extends React.Component {
@ -386,12 +401,9 @@ export class ImageViewer extends React.Component {
render() { render() {
const { const {
uri, width, height, theme, imageComponentType, ...props uri, width, height, imageComponentType, theme, ...props
} = this.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 // 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 // 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 // is required for the "scale focal point" math to work correctly
@ -416,7 +428,7 @@ export class ImageViewer extends React.Component {
onGestureEvent={this._onPanEvent} onGestureEvent={this._onPanEvent}
onHandlerStateChange={this._onPanEvent} onHandlerStateChange={this._onPanEvent}
> >
<AnimatedFastImage <AnimatedImage
style={[ style={[
styles.image, styles.image,
{ {
@ -435,6 +447,7 @@ export class ImageViewer extends React.Component {
] ]
} }
]} ]}
imageComponentType={imageComponentType}
resizeMode='contain' resizeMode='contain'
source={{ uri }} source={{ uri }}
{...props} {...props}