Low quality of vertical (portrait) images!

[Omelyan]

Describe the bug Vertical images are rendered at low resolution in horizontal container when loaded from cache. At the same time, everything is ok when filling the vertical container. This problem has been around for a long time. See #658, #545, #850... An image display component that cannot properly display an image. Hey!

Screenshots

<FastImage
  source={{ uri }}
  resizeMode={FastImage.resizeMode.cover}
  style={{ height: 160, width: 320 }}
/>

---

<FastImage
  source={{ uri }}
  resizeMode={FastImage.resizeMode.cover}
  style={{ height: 500, width: 320 }}
/>

Dependency versions

• React Native version: 0.66.4
• React Native Fast Image version: 8.5.11
• Android API 29

[xiaowl]

@Omelyan I believe this issue is caused by that the order of property updates is RANDOM as RN using Maps to pass properties. soruce always being set before resizeMode, then Glide will using FIT_CENTER to loading and later the ImageView using CENTER_CROP to display.

Workaround I used:

const [uri, setUri] = useState('');
useEffect(() => {
    setUri(item.uri);
}, []);

<FastImage
  source={{uri: uri}}
  ....
/>

[Omelyan]

@xiaowl that's great, but I'm talking about an image displaying component that can't display a vertical image properly, and this issue has been around for years. Maybe it should be renamed to FastHorizontalImage..?

[xiaowl]

Maybe I can make a pull request trying to fix this isse.

[bodrius]

same issue

[apapalillo]

I have exactly the same issue

[AlanWen2016]

same issue

[pierroo]

By any chance, is that "displaying image component" react-native-lightbox-v2 @Omelyan ? I am facing the same issue with this library when it contains a fastImage, and for some reason when I close the ligthbox view, re-open it right away: then the image is no longer "low quality looking". Magic.