mrousavy / mrousavy/react-native-nitro-image

Unwanted cropping in iOS only when combining web and local images

Open
#86 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
652
Forks
37
Avg merge
56m
Merged PRs (30d)
6

Description

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.

Image

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided Image wrapper and NitroImage usage, then reproduce the local-image followed by web-image navigation sequence on iOS using the listed React Native and Nitro Image versions. Compare the affected image's dimensions and cropping with Android and alternative libraries; done means the web image is no longer constrained by the previously visited local image and the yellow background is not exposed.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.