9

Highly customisable Crop component for React Native

 2 years ago
source link: https://reactnativeexample.com/highly-customisable-crop-component-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

react-native-avatar-crop

Highly customisable Crop component for React Native.

react-native-avatar-crop

Usage

check dependencies

  let crop;
  const {width: SCREEN_WIDTH} = Dimensions.get('window');

  <Crop
    source={uri}
    cropShape={"circle"} // rect || circle
    width={SCREEN_WIDTH}
    height={SCREEN_WIDTH}
    cropArea={{
      width: SCREEN_WIDTH / 1.3,
      height: SCREEN_WIDTH / 1.3,
    }}
    borderWidth={0}
    backgroundColor={'#FFFFFF'}
    opacity={0.7} // 0 till 1, default is 0.7
    maxZoom= {3} // default 3
    resizeMode={"contain"} // default "cover"
    onCrop={cropCallback => (crop = cropCallback)} // returns a function
  />

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

    Report a bug here

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

  • [ ] Add rotation support

GitHub

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK