React Native Image resizeMode: cover with bottom positioning

Question

hello guys I have a problem with Image positioning. I would like to achieve to position my Image like resizeMode="cover" + background-position: "bottom". So if Image overflows, i need to let the image be drew from bottom of the screen and "cropped" from sides and top. Is something like this even possible? My current code is:

<View style={{
  height: ILLUSTRATION_HEIGHT,
  width: ILLUSTRATION_WIDTH,
  position: "relative",
  overflow: "hidden"
}}>
    <Image
      width={ILLUSTRATION_WIDTH}
      height={ILLUSTRATION_HEIGHT}
      resizeMode="cover"
      source={{ uri: "illustration" }}
      style={{
        position: "absolute",
        bottom: 0,
        width: "100%",
        height: "100%"
        }}
      />
</View>

Maybe I did not describe it well enough so here is a picture of what I'm trying to achieve:

Note: Dashed part is the part of Image, that is actually showed from full picture.

Thank you so much!

Answer 1

By using width and height '100%' you can't get exactly what you wanted to, because the image will fill all the available space, I suggest debugging your UI using backgroundColor or ctrl+D and 'toggle inspector' then check what exactly happens in your view. This is a snippet of code that responds to your need (right image 'WHAT I NEED):

<View
        style={{
          height: 150,
          width: 150,
          position: 'relative',
          overflow: 'hidden',
          backgroundColor:'red',
          alignItems:'center'
        }}>
        <Image
        
          resizeMode="cover"
          source={{ uri: 'https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' }}
          style={{
            position: 'absolute',
            bottom: 0,
            width: '90%',
            height: '90%',
          }}
        />
      </View>

you will get something like that :