How to make a horizontal ScrollView with images stretch to 100% width and remain scrollable in React Native?

Question

I have a horizontal ScrollView in my React Native app that displays images fetched from a data source. I want the ScrollView to stretch to 100% width of its container and remain scrollable horizontally.

How can I make the ScrollView stretch to 100% width and remain scrollable? Here's a simplified version of my code:

<ScrollView
  horizontal
  showsHorizontalScrollIndicator={false}
  style={styles.imageContainer}
>
  {selectedItem.images.map((image, index) => (
    <Image
     key={index}
     source={{ uri: image.src }}
     style={styles.imageBackground}
     resizeMode="contain"
    />
  ))}
</ScrollView>

//STYLES
const { width } = Dimensions.get("window");

const styles = StyleSheet.create({
   imageContainer: {
     borderWidth:1,
   },
   imageBackground: {
      width: width - 24,
      height: (width - 24) * 0.75,
      margin: 5,
   },
});

I want the ScrollView to stretch to 100% width of its container and remain scrollable horizontally.

I've tried setting minWidth to '100%' in the contentContainerStyle , but it's not working as expected. How can I achieve this layout with a horizontally scrollable ScrollView that stretches to 100% width?.

// IGNORE THE GRAY BORDER