Issue with customizing border in imageStyle when resizeMode is "contain" or "center"

[MrSinaRJ]

I tried to add a radius to each image in imageStyle, but the photos will change behavior strangely due to some behind the scene work that I couldn't find. I will post both code and screenshot of the standard format and what I want to achieve that gave me a headache for two days 😁 I hope it's something easy to fix.

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import {
  DynamicCollage,
  StaticCollage,
} from "@qeepsake/react-native-images-collage";

export default function App() {
  const photos = [
    "https://picsum.photos/300/600",
    "https://picsum.photos/300/500",
    "https://picsum.photos/300/400",
    "https://picsum.photos/300/700",
    "https://picsum.photos/300/800",
    "https://picsum.photos/300/600",
    "https://picsum.photos/300/500",
    "https://picsum.photos/300/400",
    "https://picsum.photos/300/700",
    "https://picsum.photos/300/800",
  ];
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <StaticCollage
        images={photos}
        matrix={[1, 1, 2, 1, 2, 1, 2]}
        direction="column"
        imageStyle={{
          margin: 5,
          resizeMode: "contain",
        }}
        containerStyle={styles.container}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    borderRadius: 0,
    flex: 1,
  },
});

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import {
  DynamicCollage,
  StaticCollage,
} from "@qeepsake/react-native-images-collage";

export default function App() {
  const photos = [
    "https://picsum.photos/300/600",
    "https://picsum.photos/300/500",
    "https://picsum.photos/300/400",
    "https://picsum.photos/300/700",
    "https://picsum.photos/300/800",
    "https://picsum.photos/300/600",
    "https://picsum.photos/300/500",
    "https://picsum.photos/300/400",
    "https://picsum.photos/300/700",
    "https://picsum.photos/300/800",
  ];
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <StaticCollage
        images={photos}
        matrix={[1, 1, 2, 1, 2, 1, 2]}
        direction="column"
        imageStyle={{
          borderRadius: 5,
          margin: 5,
          resizeMode: "contain",
        }}
        containerStyle={styles.container}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    borderRadius: 0,
    flex: 1,
  },
});

EDIT: I forgot to mention, this only happens if the resizeMode is set to contain or center in imageStyle

[MrSinaRJ]

More on this matter:

If I do anything related to borders, it will destroy the result and make it unusable. adding the borderWidth: 1 will break as same as borderRadius: 5

[lukebrandonfarrell]

Hey @MrSinaRJ, I'm not fully understanding the problem. Are you saying that when you set resizeMode to contain it creates a blur effect on the borders?

[MrSinaRJ]

Hey @lukebrandonfarrell, yes, you can get this effect with either of 2 settings below:

resizeMode: "contain",
borderWidth: 1

OR

resizeMode: "contain",
borderRadius: 5

Also, you can replace contain with center. When the photo is smaller than the frame, it will stretch to the end

[lukebrandonfarrell]

Hmm that is very strange 🤔 I've never seen behaviour like that before