Image Stretching Issue When Resizing Width

[nareshkopanathi]

I am using the react-native-blasted-image library to display images in my React Native app. However, when I try to fit the image width to my view's width, the image gets stretched and does not maintain its original aspect ratio.

I want the image to fill the container width while preserving its original proportions, but increasing the width causes distortion.

Steps to Reproduce

1. Render an image using BlastedImage inside a View.
2. Set a fixed width (e.g., width: 200).
3. Increase the width dynamically or set it to 100% of the parent container.
4. The image stretches instead of maintaining its original aspect ratio and borderRadius is not applied on the right side of the image when increase the width.

Expected Behavior

1. The image should fill the container width while preserving its original aspect ratio.
2. It should not get distorted when resizing the width.

Actual Behavior

1. When increasing the width, the image stretches and loses its original proportions and borderRadius.
2. The resizeMode='cover' does not prevent distortion when adjusting width.

Code Example <View style={styles.imageContainer} key={index}> <BlastedImage key={index} source={{ uri: item }} resizeMode='cover' width={200} // Increasing this causes stretching height={200} style={{ borderRadius: 5 }} /> </View>

Note: If there are more than 100 images, increasing both the width and height to the same value causes the app to crash.

1. How much memory is allocated for caching images in RAM and disk storage?
2. Is there a way to check the current cache size programmatically?
3. Can we configure or increase the cache size manually? If so, how?

I couldn't find any documentation regarding cache size limits or customization. Any insights would be greatly appreciated.

[tahaAlgoace]

any update?

[xerdnu]

Percentage-based sizing isn’t supported in react-native-blasted-image because it significantly impacts performance and can cause flickering issues that are common in other libraries. The recommended approach is to calculate and set the image size manually. You can read more about it here: https://github.com/xerdnu/react-native-blasted-image/issues/34

I wasn’t able to reproduce the issue you described where the image appears stretched or doesn’t respect the resizeMode. The most likely cause is percentage-based sizing. Please try using fixed dimensions and let me know if the problem still occurs and if it does i’ll be happy to take another look.

Regarding caching: the in-memory cache is capped at 256MB, and the disk cache at 1GB. These values aren’t configurable at the moment, and honestly, I don’t think it’s ideal for images to cache beyond that on a device.

Best regards 🚀