> For the complete documentation index, see [llms.txt](https://dormakaba-digital.gitbook.io/reactnative-visual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dormakaba-digital.gitbook.io/reactnative-visual/components/image-cropper.md).

# Image Cropper

Adding images...

## Preview

The component let's user choose an existing image from the image gallery or to take a new one and is able to select an area of that image to pass to your app. Mostly used to take person images for avatar component or similar use cases.

![](https://3422846761-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGP0U4aBj2zuNdsU1Qu%2F-LGjioeT4TYSp9-zA5L3%2F-LGjj0Z25XIYUljfQU1-%2Fimage_picker.png?alt=media\&token=b132ba3e-e100-4f6d-ae6e-d57040faefda)

## Code sample

```jsx
import { ImageCropper } from '@dormakaba/digital-reactnative-visual';

<ImageCropper onChange={(img) => {}}>
  <Button primary>Take image</Button>
</ImageCropper>
```

The child of the Image cropper can be any component taking an \`onPress\` prop (Buttons,...).

## Props

| **Name** | **Type** | **Description**                                           |
| -------- | -------- | --------------------------------------------------------- |
| onChange | function | returns the image after taken or choosen from the library |