vemarav / react-native-avatar-crop

Highly customisable <Crop /> component for React Native < 💅 >

react-native-avatar-crop

Supports rect and circle cropping. Use cropArea={{width, height}} for custom aspect ratio.

Download apk to see it in action, click to download

Image Picker	Network Image

Installation

Note: Please migrate to @react-native-masked-view/masked-view if using @react-native-community/masked-view

npm

npm install react-native-avatar-crop vemarav/react-native-image-editor react-native-image-size @react-native-masked-view/masked-view  @react-native-gesture-handler --save

yarn

yarn add react-native-avatar-crop vemarav/react-native-image-editor react-native-image-size @react-native-masked-view/masked-view  @react-native-gesture-handler

Usage

const component = (props) => {
  const { uri, setUri } = useState("");
  let crop;
  const { width: SCREEN_WIDTH } = Dimensions.get("window");

  const cropImage = async () => {
    // crop accepts quality, default is 1
    // uri will have cropped image cache path
    const { uri, width, height } = await crop(0.9);
    setUri(uri);
  };

  return (
    <View>
      {uri ? (
        <Image
          source={{ uri }}
          style={{
            width: SCREEN_WIDTH,
            height: SCREEN_WIDTH,
            resizeMode: "contain",
          }}
        />
      ) : null}
      <Crop
        source={props.uri}
        cropShape={"circle"} // rect || circle
        width={SCREEN_WIDTH} // default value
        height={SCREEN_WIDTH} // defalt value
        cropArea={{
          width: SCREEN_WIDTH / 1.3, // required
          height: SCREEN_WIDTH / 1.3, // required
        }}
        borderWidth={0} // default 2
        backgroundColor={"#FFFFFF"} // default #FFFFFF, use same format
        opacity={0.7} // between 0 and 1, default is 1
        maxZoom={3} // default 3
        resizeMode={"contain"} // default "cover"
        onCrop={(cropCallback) => (crop = cropCallback)} // returns a function
      />
    </View>
  );
};

see full example here

CONTRIBUTING

1. Whether you are a novice or experienced software developer, all contributions and suggestions are welcome!

   Clone repo

   git clone https://github.com/vemarav/react-native-avatar-crop.git

2. Add features or bug fixes

3. Make a Pull Request

   OR

   Report a bug here

   Feel free to contribute, hosted on ❤️ with Github.

TODO

• Add rotation support

LICENSE

Package published under MIT License

Author

• Aravind Vemula

LIKED IT

Please use following button to star the, so it can reach others too

SOCIAL

react-native-avatar-crop's Issues

Failed to crop image!

Failed to crop image!
null is not an object (evaluating 'RNCImageEditor.cropImage')

Cannot crop when screen using createNativeStackNavigator from '@react-navigation/native-stack'

Image cannot crop, zoom when that screen in app using createNativeStackNavigator from '@react-navigation/native-stack'

this is my dependencies

"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.5.0",
"react-native-avatar-crop": "^1.3.5",
"react-native-gesture-handler": "2.2.0",
"react-native-image-size": "^1.1.3",
"@react-native-community/image-editor": "vemarav/react-native-image-editor",
"@react-native-masked-view/masked-view": "^0.2.6",

TypeError: null is not an object (evaluating 'RNCImageEditor.cropImage')

Using npm@7 @react-native-community/image-editor will fail to install.

run npm install git+https://github.com/vemarav/react-native-image-editor --save to fix the issue

TypeError: null is not an object (evaluating 'RNCImageEditor.cropImage')

ERROR Failed to crop image!
WARN Possible Unhandled Promise Rejection (id: 0):
TypeError: null is not an object (evaluating 'RNCImageEditor.cropImage')

"react": "18.0.0",
"react-native": "0.69.6",

nothing works
start from expo go

Pinch to zoom gesture not working on Android when used inside or outside ScrollView

I tried all the solution given here but still not working.

Background Image Covers Up the Image

Hey! Just noticed that when trying to change the background color, the background color will cover over the image (https://gyazo.com/1bd6ee9145f823a5e0ef9952ca0825cf). The steps to reproduce this are just to download the package, import the Crop component, and then change the background color prop like so:

import { StackScreenProps } from "@react-navigation/stack"
import { useEffect, useState } from "react";
import { View, Text, useWindowDimensions } from 'react-native'
import Crop from "react-native-avatar-crop";
import { TouchableOpacity } from "react-native-gesture-handler";
import { AppStackParamList } from "src/infra/navigation/AppNavigator"
import { theme } from "src/infra/theme";
const CropPhoto = ({ navigation, route }: StackScreenProps<AppStackParamList, "CropPhoto">) => {
const { image, type, background } = route.params;

const [uri, setUri] = useState("");

// let crop: (scale: number) => Promise<{ uri: string, width: number, height: number }>;

// const cropImage = async () => {
//     const { uri, width, height } = await crop(0.8);
//     setUri(uri);
// };

const dimensions = useWindowDimensions();

return <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Crop
        source={{ uri: image }}
        cropShape={type === "profile" ? "circle" : "rect"}
        height={dimensions.height - 200}
        width={dimensions.width}
        cropArea={{
            width: dimensions.width / 1.1,
            height: dimensions.width / 1.1,
        }}
        borderWidth={1}
        maxZoom={8}
        onCrop={(cropCallback) => { }}
    />
    <TouchableOpacity onPress={() => navigation.goBack()} style={{
        backgroundColor: "#F00",
        height: 50,
        width: 50
    }}>
        <Text>Save</Text>
    </TouchableOpacity>
</View>

}
export default CropPhoto

MaskedView can't be used anywhere else in the project

Describe the bug
This package already registers RNCMaskedView, so it can't be used anywhere else. This shouldn't be the case. Instead it should use the MaskedView component from that package.

To Reproduce
Steps to reproduce the behavior:

1. Use this package
2. Import MaskedView somewhere else in your project and use it

import MaskedView from '@react-native-masked-view/masked-view'
// ...
<MaskedView />

3. Get this error: Invariant Violation: Tried to register two views with the same name RNCMaskedView

Expected behavior
MaskedView should be usable somewhere else.

Smartphone:

• iOS and Android

The clipping height setting is very small, and there are problems with sliding and scaling, for example, the height setting is less than 100

Describe the bug
The clipping height setting is very small, and there are problems with sliding and scaling, for example, the height setting is less than 100

Smartphone (please complete the following information):

• Device: all

Additional context
"react": "^17.0.2",
"react-native": "0.68.2",

Readme incorrect installation instructions

Today the instructions are like this:

npm install react-native-avatar-crop vemarav/react-native-image-editor react-native-image-size @react-native-masked-view/masked-view @react-native-gesture-handler --save

It should be like this:

npm install react-native-avatar-crop vemarav/react-native-image-editor react-native-image-size @react-native-masked-view/masked-view react-native-gesture-handler --save

---

The reason is that react-native-gesture-handler updated its nomenclature to install.

Using http url in source uri crashes the app

Works on iOS, null is not an object(evaluating 'RNImageSize.getSize') on android

Hi,

We use a very classic implementation:

<Crop cropShape={'rect'} source={{uri: picturePath}} width={'100%'} height={responsiveHeight(40)} cropArea={{ width: CROPPING_ZONE, height: CROPPING_ZONE * aspectRatio, }} onCrop={cropCallback => (crop = cropCallback)} />

Installed the library from the git you mentioned:

Everything works perfectly on iOS but on android we get the following error:

null is not an object(evaluating 'RNImageSize.getSize')

Any idea?

Thanks again for the great library, you were able to solve for us an important feature of our app.

Théo

Pinch to zoom gesture not working on Android when used inside ScrollView

Describe the bug
When the Crop component is used inside of a ScrollView, the image can't be zoomed with 2 fingers on Android, instead the ScrollView is moving. Just moving the image with 1 finger works fine.

On iOS, everything works as expected.

To Reproduce
Steps to reproduce the behavior:

1. Put the <Crop> inside a <ScrollView>
2. Try to zoom the image with 2 fingers on Android
3. The screen is scrolling

Expected behavior
Pinch to zoom should work on Android also when used inside a ScrollView.

Smartphone:

• OS: Android (tested with 7 and 11)

Additional context
Might be related: software-mansion/react-native-gesture-handler#1082

How onCrop funtion works?

I have installed the library successfully , is there any button to crop image? library just show that there is onCrop function which returns the callback but how to call that onCrop function? is there any button which i can't see?

<Crop
source={{ uri: image.path }}
cropShape={"rect"} // rect || circle
width={width} // default value
height={height} // defalt value
cropArea={{
width, // required
height, // required
}}
borderWidth={0} // default 2
backgroundColor={"#FFFFFF"} // default #FFFFFF, use same format
opacity={0.7} // between 0 and 1, default is 1
maxZoom={3} // default 3
resizeMode={"contain"} // default "cover"
onCrop={(cropCallback) => (crop = cropCallback)} // returns a function

work with RNWeb?

In case someone else has already verified it.

RNCMaskedView was not found in UIManager

RNCMaskedView was not found in UIManager.

r

Invariant Violation: Tried to register two views with the same name RNCMaskedView

Describe the bug

When including this library into my project I have the following error:

Invariant Violation: Tried to register two views with the same name RNCMaskedView.

To Reproduce

npm install @react-native-masked-view/masked-view
npm install react-native-avatar-crop

Expected behavior

Not having conflicts with new library.

---

I believe this error is due to the conflict between:

• react-native-community/masked-view
• react-native-masked-view/masked-view

They are both the same library but it was renamed and moved to its own organization as react-native-masked-view/masked-view, which is now the updated version.

I would suggest using react-native-masked-view/masked-view instead and releasing a new major version of your package to avoid breaking existing apps.

See:

• https://www.npmjs.com/package/@react-native-masked-view/masked-view
• https://www.npmjs.com/package/@react-native-community/masked-view

PR open: #9

Tried to register two views with the same name RNCMaskedView

I am getting this error when I used this module. any ideas as to why?

Image not panning properly using different width and height for component