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.

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.