[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 GitHub
parent 53cc823dbc
commit 0923851072
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 5 deletions

View File

@ -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}