How to show the only part of the image

Question

UPDATE Since the question was complicating and unclear, I\'m rewriting my question to make it much simpler.

Given

Answer 1

Here is a working example: https://snack.expo.io/@zvona/cropped-image

The idea is to have "cropped" View where Image is positioned inside it with custom dimensions. I use constants in my example to clarify the case.

<View style={styles.cropped}>
  <Image
    style={styles.image}
    source={{uri: 'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'}} />
</View>

And on styles:

  image: {
    marginLeft: -OFFSET_LEFT,
    marginTop: -OFFSET_TOP,
    width: IMAGE_WIDTH,
    height: IMAGE_HEIGHT,
  },

  cropped: {
    width: 150,
    height: 150,
    overflow: 'hidden',
    position: 'absolute',
    left: OFFSET_LEFT,
    top: OFFSET_TOP,
  },

Note that ImageBackground is only for example purposes and it's not needed in the actual implementation.