[Bug]: Cropzoom iOS image show as blurry image

[RuchiraSwarnapriya]

Summary

In my application, I am using CropZoom to crop images. However, on iOS, when I navigate to that screen, the image initially appears blurry.

To fix this, I added a 10-millisecond delay before loading the CropZoom component, and it works perfectly now.

  const [isScreenLoaded, setIsScreenLoaded] = useState(false);

  useEffect(() => {
    // Simulate screen loading completion
    setTimeout(() => {
      setIsScreenLoaded(true);
    }, 100); // Adjust timeout as needed or remove if unnecessary
  }, []);

{!isScreenLoaded ? (
        <View style={styles.imageContainer} />
      ) : (
        <View style={styles.imageContainer}>
          <View style={styles.root}>
            <CropZoom
              ref={cropRef}
              cropSize={cropSize}
              maxScale={3}
              resolution={resolution}
              OverlayComponent={renderOverlay}
            >
              <Image source={{ uri: item.location }} style={styles.image} resizeMethod="scale" />
            </CropZoom>
          </View>
        </View>
      )}

Environment

"react-native-zoom-toolkit": "^4.0.0"

Steps to Reproduce

No response

[Glazzes]

Hi @RuchiraSwarnapriya, could you please share me the image you're using? As far as I'm concerned this is a problem with iOS calculations for the image size, I never took the time to experiment before, might as well give it a look now.

As a temporary or definitive fix you could switch to Expo Image, someone reported the problem dissaperaed as soon as they made the change.

[RuchiraSwarnapriya]

Hi @Glazzes, I'm using iOS simulator images.

Yeah, Sure I'll try with Expo Image.

Thanks for the quick response