renderLoader is not implemented as stated in the readme.

[mrkpatchaa]

Describe the bug renderLoader is not implemented as stated in the readme.

To Reproduce Steps to reproduce the behavior:

<ImageZoom
  uri={image}
  renderLoader={() => <LoaderScreen loaderColor={Colors.primary} />

Expected behavior renderLoader should be implemented.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Related to this commit https://github.com/likashefqet/react-native-image-zoom/commit/8f7605188347bd7a5696e5b508d59a28c1e01fc6

[mrkpatchaa]

Kind of related to #25

[likashefqet]

Thank you for reporting this and apologies for the confusion. I decided on removing the renderLoader so that developers can implement their own loader regardless of the implementation of the image zoom component.

Will update the README file.

[mrkpatchaa]

Thanks. Can you advise how We could implement a custom loading? I have something like this:

          <Carousel
            containerStyle={{
              height: '100%',
              backgroundColor: 'transparent',
            }}
            pageControlProps={{
              size: 7,
            }}
            pageControlPosition={Carousel.pageControlPositions.OVER}
            showCounter
          >
            {listing?.images?.map((image, i) => {
              return (
                <ImageZoom
                  key={i}
                  resizeMode="center"
                  uri={image}
                  renderLoader={() => <LoaderScreen loaderColor={Colors.primary} />}
                />
              )
            })}
          </Carousel>

[likashefqet]

@mrkpatchaa You can create a new component that adds the loading functionality to the image zoom and then use the newly created component on you example.

Here's an example:

import React, { useState } from 'react';
import { ImageZoom as ImageZoomComponent } from '@likashefqet/react-native-image-zoom';
import LoaderScreen from 'path/to/loaderscreen';
import Colors from 'path/to/colors';

export default function ImageZoom(props) {
  const [isLoading, setIsLoading] = useState(true);

  const onLoadEnd = () => {
    setIsLoading(false);
  };

  if (isLoading) {
    return (
      <LoaderScreen loaderColor={Colors.primary} />
    ); // Implement your own loader here.
  }

  return (
    <ImageZoomComponent
      {...props}
      onLoadEnd={onLoadEnd} // Invoked when load either succeeds or fails
    />
  );
}

[mrkpatchaa]

Got you @likashefqet Thanks for the quick reply and for this amazing lib. The integration is smooth 🔥

[mrkpatchaa]

Closing this as the documentation will be updated.

[mrkpatchaa]

Posting the solution that is currently working for me

export default function ImageZoom(props: ImageZoomProps) {
  const [isLoading, setIsLoading] = useState(true)

  const onLoadEnd = () => {
    setIsLoading(false)
  }

  return (
    <>
      {isLoading && <LoaderScreen loaderColor={Colors.primary} />}
      <ImageZoomComponent {...props} onLoadEnd={onLoadEnd} />
    </>
  )
}

The trick here is that the image component needs to be rendered in order for onLoadEnd (and other callbacks) to be triggered. If We do this

  if (isLoading) {
    return (
      <LoaderScreen loaderColor={Colors.primary} />
    ); // Implement your own loader here.
  }

the onloadEnd function will never be called. It will result in an infinite loader state.