Images rendering at lower resolution with SharedElement transition

[tconroy]

Hello! Great work on this library, it's really helping me out a lot!

I have a problem/question, and I'm not sure if it's just my implementation or a limitation of the library.

It seems like images rendered in the gallery are low resolution.

I am using shared element transitions to do something like this:

Feed.tsx

<SharedElement id={`${href}`}>
  <MemoizedImage source={href} />
 </SharedElement>

Gallery.tsx

const renderItem = ({
  item,
  setImageDimensions,
}: RenderItemInfo<string>) => {
  return (
    <SharedElement id={`${item.href}`} style={StyleSheet.absoluteFillObject}>
      <Image
        source={item.href}
        contentFit="contain"
        contentPosition="center"
        priority="high"
        style={{StyleSheet.absoluteFillObject}}
        onLoad={(e: ImageLoadEventData) => {
          setImageDimensions({
            width,
            height,
          });
        }}
      />
    </SharedElement>
  );
};

export default function ImageScreen(props: ImageScreenProps) {
  const { goBack } = props.navigation;
  const { params } = props.route;
  const gallery = useRef<GalleryRef>(null);
  const data = useMemo(() => [params], [params]);

  return (
    <AwesomeGallery
      ref={gallery}
      data={data}
      renderItem={renderItem}
      doubleTapInterval={150}
      onSwipeToClose={goBack}
      coverScreen={true}
    />
  );
}

so, Feed renders small image thumbnails, and when you click on those thumbnails, it's transitioned to a full-screen modal-like view with AwesomeGallery.

my MemoizedImage is a wrapper around Expo-Image. When the image loads, I calculate a "scaled down" size for it (to render it in a post feed at thumbnail dimensions). i.e: if an image is 1000x1000px, I render it at 200x200px, for example.

However, when in the Gallery view, the image is the same resolution as the thumbnail - 200px - and so zooming in on the image, you do not see much detail.

Any tips on how I can fix this? I'd like the full-sized image in the "Gallery" view.

[stevengoldberg]

I ran into the same situation when trying to use expo-image for this use case, so I used a regular Image instead. Does that work for you?

[pavelbabenko]

@tconroy @stevengoldberg Your issue is probably related to expo image caching

[pavelbabenko]

Did you have a chance to fix the issue?

[tconroy]

Apologies, I have not had a chance to try this yet!

[wtlgo]

If you use the expo-image package, you should pass the allowDownscaling={false} prop, otherwise, the zoom will not work correctly. Ref: https://docs.expo.dev/versions/latest/sdk/image/#allowdownscaling