React Native Styling - Overlay Image

.jsx

const createStyles = () =>
  StyleSheet.create({
    image: {
      borderRadius: Spacing.tiny,
      overflow: "hidden",
      position: "relative",
    },
    overlay: {
      position: "absolute",
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      backgroundColor: "gray",
      opacity: 0.6,
      overflow: "hidden",
      borderRadius: Spacing.tiny,
    },
  });

<View style={styles.image}>
  <Image width={158} height={118} source={{ uri: imageUrl }} />
  {stockAvailable <= 0 && <View style={styles.overlay} />}
</View>