[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:
parent
3be67f5a4f
commit
be718db8a5
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue