mrousavy / mrousavy/react-native-nitro-image
Unwanted cropping in iOS only when combining web and local images
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.
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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