Unwanted cropping in iOS only when combining web and local images

[samuelvisscher]

We are using react-native-nitro-image to show both local and web images:

const localImage = require("assets/some-local-image.png")
const webImage = { url: "https://example.com/image.png" }

When within one of our tabs, we move to one page with a localImage, and after that to another page with a webImage at the top, we correctly get to see our web image, but it will be cropped according to the dimensions of the localImage.

For example, we have this Image component:

import { StyleProp, View, ViewStyle } from "react-native";
import { NitroImage, NitroImageProps } from "react-native-nitro-image";

export type ImageProps = {
  containerStyle?: StyleProp<ViewStyle>;
} & NitroImageProps;

export const Image = ({ containerStyle, ...props }: ImageProps) => {
  return (
    <View style={[{ backgroundColor: "yellow" }, containerStyle]}>
      <NitroImage {...props} />
    </View>
  );
};

And whenever we've visited the page with the local image, suddenly our image is cropped, and while before no yellow was visible, we now see that our page has been cropped to fit the local image on the previous screen, revealing the yellow background.

The same thing doesn't happen on Android, or with alternative image libraries.

Relevant dependencies:

"react-native": "0.82.1",
"react-native-nitro-image": "^0.9.0",
"react-native-nitro-modules": "^0.31.10",
"react-native-nitro-web-image": "^0.9.0",

Any idea what this may be? If you're available to look at it, I could try to make you an example app. I can reproduce the issue in our app with 100% accuracy.

Note that not all images appear to be affected, and that assigning keys did not help.

[samuelvisscher]

This could probably be optimized, but the below fix solved my issue for now. It turned out not to be related to local vs web images.

diff --git a/node_modules/react-native-nitro-image/ios/HybridImageView.swift b/node_modules/react-native-nitro-image/ios/HybridImageView.swift
index beb9da8..cfc131e 100644
--- a/node_modules/react-native-nitro-image/ios/HybridImageView.swift
+++ b/node_modules/react-native-nitro-image/ios/HybridImageView.swift
@@ -95,6 +95,8 @@ class HybridImageView: HybridNitroImageViewSpec, NativeImageView {
   }
 
   private func updateImage() {
+    resetClipping()
+
     switch image {
     case .first(let hybridImageSpec):
       // Specific image
@@ -111,6 +113,14 @@ class HybridImageView: HybridNitroImageViewSpec, NativeImageView {
     }
   }
 
+  private func resetClipping() {
+    let layer = imageView.layer
+    layer.mask = nil
+    layer.cornerRadius = 0
+    layer.masksToBounds = false
+    layer.contentsRect = CGRect(x: 0, y: 0, width: 1, height: 1)
+  }
+
   private func didSetImageLoader() {
     // An ImageLoader was set - trigger an update (load or drop)
     if imageView.isVisible {