Can you reset the zoom?

[fendorio]

Can you reset the zoom on this? I have a component which loads full-resolution images, when clicked from a slideshow, if I click an image, then zoom in, then click another image, the zoom level remains, thus I have come to the question, can I reset the zoom level? So that in my example, once a new image is loaded into the view, I can reset the zoom level.

[wangxpert]

I am also faced with this issue. Did you find out the solution?

[ascoders]

Add unique key for each component?

[ongmap]

Need this feature support in future

[ascoders]

How about this?

someTimes() => {
  this.rnZoom.resetScale()
}

render() {
  return (
    <ReactNativeImageZoom ref={ ref => this.rnZoom = ref }>...</ReactNativeImageZoom>
  )
}

[Kyonru]

As @ascoders said, you can use reset instead of resetScale, this will reset the scale and the position. It would be a good idea to update the docs.

[ascoders]

Fix in #49

[braianj]

Hi, this is not working for me

<ImageZoom
                cropWidth={screenWidth}
                cropHeight={screenWidth}
                imageWidth={screenWidth}
                imageHeight={screenWidth}
                panToMove={false}
                ref={ ref => this.rnZoom = ref }
                key={index}
                responderRelease={ () => {
                   this.rnZoom.resetScale();
                   this.rnZoom.reset();
                }}
            >
               <Image
                   source={{uri: item}}
                   style={styles.image}
                   onError={() => {
                      this.setState({hasError: true})
                   }}
               />
            </ImageZoom>

[EKOLX]

@braianj try this:

import ImageZoom from "react-native-image-pan-zoom";
import ImageViewer from "react-native-image-pan-zoom/built/image-zoom/image-zoom.component";

const imageRef = useRef() as MutableRefObject<ImageViewer>;

const onSomeButtonPress = () => {
    imageRef.current.reset();
  };

<ImageZoom
    ref={imageRef}
    cropWidth={width}
    cropHeight={imageHeight}
    imageWidth={width}
    imageHeight={imageHeight}
>
  {loading && (
    <ActivityIndicator style={StyleSheet.absoluteFill} size="large" />
  )}
  <Image
    style={styles.image}
    source={{ uri: image?.url }}
    onLoad={() => setLoading(false)}
  />
</ImageZoom>