How to focus crop image in React Native

Question

According to the docs, the react native's Image component support the following resizeModes:

'cover', 'contain', 'stretch', 'repeat', 'center'

If the image is larger then the Image component, the center mode fits the image in the Image in the component by uniformly scaling the image such that the center point of the image is in center of the Image component.

I would like to know if there is a hack or a solution in which we can define a custom point (say 0,300) as a focus point such that it is the center of the Image view.

What I want to achieve is somewhat like focus crop in fresco, but should also work for IOS.

Solution 1

I think you need to handle like this

const CroppedImage = React.createClass({
  render() {
    return (
      <View
        style={[
          {
            overflow: 'hidden',
            height: this.props.cropHeight,
            width: this.props.cropWidth,
            backgroundColor: 'transparent'
          },
          this.props.style
        ]}
      >
        <Image
          style={{
            position: 'absolute',
            top: this.props.cropTop * -1,
            left: this.props.cropLeft * -1,
            width: this.props.width,
            height: this.props.height
          }}
          source={this.props.source}
          resizeMode={this.props.resizeMode}
        >
          {this.props.children}
        </Image>
      </View>
    );
  }
});

Look at this example Link

Solution 2

React-Native has a built-in API to handle image cropping, ImageEditor. It makes image cropping fairly simple. See the function below for an example.

The inputted image takes the form of a URI. The image is cropped, and a URI pointing to a cropped image is provided (the image is housed via React-Native's ImageStore API). Subsequently use this URI to display the cropped image as you wish.

// Make sure you import ImageEditor from react-native!
async cropImage(){
    // Construct a crop data object. 
    cropData = {
        offset:{x:0,y:0}, 
        size:{width:20, height:20},
    //  displaySize:{width:20, height:20}, THESE 2 ARE OPTIONAL. 
    //  resizeMode:'contain', 
    }
    // Crop the image. 
    try{
        await ImageEditor.cropImage(uri, 
            cropData, (successURI) => {Something awesome with successURI!}, 
            (error) =>{console.log('cropImage,',error)}
        )
    }
    catch(error){
        console.log('Error caught in this.cropImage:', error)
    }
}
// End of function.