Show the part of the image like Instagram in React Native?

Question

I'm building photo albums React Native mobile app. Since I want to show square image which is portion of the wide image(1) as image(2).

So question, How can I zoom the middle of the image properly in React Native? Can I do it with StyleSheet(CSS)? Or is there any library?

Image(1) - 2048 px x 1152 px

Image(2) - 1080 px x 1080 px

Answer 1

Look into Image component resizeMode property. It should work for you.

https://facebook.github.io/react-native/docs/image.html#resizemode

It determines how to resize the image when the frame doesn't match the raw image dimensions.

• cover : Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

• contain : Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

• stretch : Scale width and height independently, This may change the aspect ratio of the src.

• repeat : Repeat the image to cover the frame of the view. The image will keep it's size and aspect ratio. (iOS only)

Try this for example:

<Image style={{width: 100, height: 100}} resizeMode="cover" />