How to show the only part of the image
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.