{"id":3929,"url":"https://github.com/ivpusic/react-native-image-crop-picker","last_synced_at":"2025-05-12T05:13:17.323Z","repository":{"id":37493166,"uuid":"59029620","full_name":"ivpusic/react-native-image-crop-picker","owner":"ivpusic","description":"iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping","archived":false,"fork":false,"pushed_at":"2025-03-14T08:40:35.000Z","size":8255,"stargazers_count":6239,"open_issues_count":890,"forks_count":1584,"subscribers_count":73,"default_branch":"master","last_synced_at":"2025-05-12T05:13:05.058Z","etag":null,"topics":["android","crop","cropping","image","ios","react","react-native","recording","video"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ivpusic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"open_collective":"react-native-image-crop-picker"}},"created_at":"2016-05-17T14:25:03.000Z","updated_at":"2025-05-12T03:26:21.000Z","dependencies_parsed_at":"2023-12-26T10:10:10.954Z","dependency_job_id":"254761f5-2f3b-4bd7-b7eb-2a35646ea752","html_url":"https://github.com/ivpusic/react-native-image-crop-picker","commit_stats":{"total_commits":445,"total_committers":154,"mean_commits":"2.8896103896103895","dds":0.6337078651685393,"last_synced_commit":"6ff41ff98874c3213907e27e781084ce2f862d2a"},"previous_names":[],"tags_count":134,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivpusic%2Freact-native-image-crop-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivpusic%2Freact-native-image-crop-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivpusic%2Freact-native-image-crop-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivpusic%2Freact-native-image-crop-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivpusic","download_url":"https://codeload.github.com/ivpusic/react-native-image-crop-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253678902,"owners_count":21946319,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","crop","cropping","image","ios","react","react-native","recording","video"],"created_at":"2024-01-05T20:16:55.628Z","updated_at":"2025-05-12T05:13:17.300Z","avatar_url":"https://github.com/ivpusic.png","language":"Objective-C","funding_links":["https://opencollective.com/react-native-image-crop-picker"],"categories":["Components","\u003ca name=\"Image-\u0026-Audio-\u0026-Video-\u0026-Docs:-Native-Modules\"\u003eImage, Audio, Video \u0026 Docs: Native Modules\u003c/a\u003e","Objective-C","组件","动画","React, React Native","Others","Mobile"],"sub_categories":["UI","音视频相机","多媒体","Media","Camera / gallery","Components","React Native \u0026 Expo"],"readme":"# react-native-image-crop-picker\n\n[![Backers on Open Collective](https://opencollective.com/react-native-image-crop-picker/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-native-image-crop-picker/sponsors/badge.svg)](#sponsors)\n\n\u003cimg src=\"svg.svg\" width=\"50%\" height=\"50%\" /\u003e\n\niOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping\n\n## Result\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=200 title=\"iOS Single Pick\" src=\"https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_single_pick_v2.png\"\u003e\n  \u003cimg width=200 title=\"iOS Multiple Pick\" src=\"https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_multiple_pick_v2.png\"\u003e\n  \u003cimg width=200 title=\"iOS Crop Normal\" src=\"https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_normal_crop.png\"\u003e\n  \u003cimg width=200 title=\"iOS Crop Circular\" src=\"https://github.com/ivpusic/react-native-image-crop-picker/blob/master/images/ios_circular_crop.png\"\u003e\n\u003c/p\u003e\n\n## Important notes\n\n1. If you are using react-native \u003e= 0.60 use react-native-image-crop-picker version \u003e= 0.25.0. Otherwise use version \u003c 0.25.0.\n2. If you want to use react-native-image-crop-picker version \u003e= 0.39.0 you have to set your android compileSdkVersion to 33 or greater. Otherwise use react-native-image-crop-picker version \u003c 0.39.0\n\n## Usage\n\nImport library\n\n```javascript\nimport ImagePicker from 'react-native-image-crop-picker';\n```\n\n### Select from gallery\n\nCall single image picker with cropping\n```javascript\nImagePicker.openPicker({\n  width: 300,\n  height: 400,\n  cropping: true\n}).then(image =\u003e {\n  console.log(image);\n});\n```\n\nCall multiple image picker\n\n```javascript\nImagePicker.openPicker({\n  multiple: true\n}).then(images =\u003e {\n  console.log(images);\n});\n```\n\nSelect video only from gallery\n\n```javascript\nImagePicker.openPicker({\n  mediaType: \"video\",\n}).then((video) =\u003e {\n  console.log(video);\n});\n```\n\n**Android: The prop 'cropping' has been known to cause videos not to be displayed in the gallery on Android. Please do not set cropping to true when selecting videos.**\n\n\n### Select from camera\n\n#### Image\n\n```javascript\nImagePicker.openCamera({\n  width: 300,\n  height: 400,\n  cropping: true,\n}).then(image =\u003e {\n  console.log(image);\n});\n```\n\n#### Video\n\n```javascript\nImagePicker.openCamera({\n  mediaType: 'video',\n}).then(image =\u003e {\n  console.log(image);\n});\n```\n\n### Crop picture\n\n```javascript\nImagePicker.openCropper({\n  path: 'my-file-path.jpg',\n  width: 300,\n  height: 400\n}).then(image =\u003e {\n  console.log(image);\n});\n```\n\n### Optional cleanup\n\nModule is creating tmp images which are going to be cleaned up automatically somewhere in the future. If you want to force cleanup, you can use `clean` to clean all tmp files, or `cleanSingle(path)` to clean single tmp file.\n\n```javascript\nImagePicker.clean().then(() =\u003e {\n  console.log('removed all tmp images from tmp directory');\n}).catch(e =\u003e {\n  alert(e);\n});\n```\n\n### Request Object\n\n| Property                                |                   Type                   | Description                           |\n| --------------------------------------- | :--------------------------------------: | :--------------------------------------- |\n| cropping                                |           bool (default false)           | Enable or disable cropping               |\n| width                                   |                  number                  | Width of result image when used with `cropping` option |\n| height                                  |                  number                  | Height of result image when used with `cropping` option |\n| multiple                                |           bool (default false)           | Enable or disable multiple image selection |\n| writeTempFile (ios only)                |           bool (default true)            | When set to false, does not write temporary files for the selected images. This is useful to improve performance when you are retrieving file contents with the `includeBase64` option and don't need to read files from disk. |\n| includeBase64                           |           bool (default false)           | When set to true, the image file content will be available as a base64-encoded string in the `data` property. Hint: To use this string as an image source, use it like: ``\u003cImage source={{uri: `data:${image.mime};base64,${image.data}`}} /\u003e`` |\n| includeExif                           |           bool (default false)           | Include image exif data in the response |\n| avoidEmptySpaceAroundImage (ios only)  |           bool (default true)           |  When set to true, the image will always fill the mask space. |\n| cropperActiveWidgetColor (android only) |       string (default `\"#424242\"`)       | When cropping image, determines ActiveWidget color. |\n| cropperStatusBarColor (android only)    |        string (default `#424242`)        | When cropping image, determines the color of StatusBar. |\n| cropperToolbarColor (android only)      |        string (default `#424242`)        | When cropping image, determines the color of Toolbar. |\n| cropperToolbarWidgetColor (android only)      |        string (default `darker orange`)        | When cropping image, determines the color of Toolbar text and buttons. |\n| freeStyleCropEnabled      |        bool (default false)        | Enables user to apply custom rectangle area for cropping |\n| cropperToolbarTitle                     |        string (default `Edit Photo`)     | When cropping image, determines the title of Toolbar. |\n| cropperCircleOverlay                    |           bool (default false)           | Enable or disable circular cropping mask. |\n| disableCropperColorSetters (android only)|           bool (default false)           | When cropping image, disables the color setters for cropping library. |\n| minFiles (ios only)                     |            number (default 1)            | Min number of files to select when using `multiple` option |\n| maxFiles                     |            number (default 5)            | Max number of files to select when using `multiple` option |\n| waitAnimationEnd (ios only)             |           bool (default true)            | Promise will resolve/reject once ViewController `completion` block is called |\n| smartAlbums (ios only)                  | array ([supported values](https://github.com/ivpusic/react-native-image-crop-picker/blob/master/README.md#smart-album-types-ios)) (default ['UserLibrary', 'PhotoStream', 'Panoramas', 'Videos', 'Bursts']) | List of smart albums to choose from      |\n| useFrontCamera                          |           bool (default false)           | Whether to default to the front/'selfie' camera when opened. Please note that not all Android devices handle this parameter, see [issue #1058](https://github.com/ivpusic/react-native-image-crop-picker/issues/1058)|\n| compressVideoPreset (ios only)          |      string (default MediumQuality)      | Choose which preset will be used for video compression |\n| compressImageMaxWidth                   |          number (default none)           | Compress image with maximum width        |\n| compressImageMaxHeight                  |          number (default none)           | Compress image with maximum height       |\n| compressImageQuality                    |            number (default 1 (Android)/0.8 (iOS))            | Compress image with quality (from 0 to 1, where 1 is best quality). On iOS, values larger than 0.8 don't produce a noticeable quality increase in most images, while a value of 0.8 will reduce the file size by about half or less compared to a value of 1. |\n| loadingLabelText (ios only)             | string (default \"Processing assets...\")  | Text displayed while photo is loading in picker |\n| mediaType                               |           string (default any)           | Accepted mediaType for image selection, can be one of: 'photo', 'video', or 'any' |\n| showsSelectedCount (ios only)           |           bool (default true)            | Whether to show the number of selected assets |\n| sortOrder (ios only)           |           string (default 'none', supported values: 'asc', 'desc', 'none')            | Applies a sort order on the creation date on how media is displayed within the albums/detail photo views when opening the image picker |\n| forceJpg (ios only)           |           bool (default false)            | Whether to convert photos to JPG. This will also convert any Live Photo into its JPG representation |\n| showCropGuidelines (android only)       |           bool (default true)            | Whether to show the 3x3 grid on top of the image during cropping |\n| showCropFrame (android only)       |           bool (default true)            | Whether to show crop frame during cropping |\n| hideBottomControls (android only)       |           bool (default false)           | Whether to display bottom controls       |\n| enableRotationGesture (android only)    |           bool (default false)           | Whether to enable rotating the image by hand gesture |\n| cropperChooseText (ios only)            |           string (default choose)        | Choose button text |\n| cropperChooseColor (ios only)           |           string (default `#FFCC00`)        | HEX format color for the Choose button. [Default color is controlled by TOCropViewController](https://github.com/TimOliver/TOCropViewController/blob/a942414508012b13102f776eb65dac655f31cabb/Objective-C/TOCropViewController/Views/TOCropToolbar.m#L444). |\n| cropperCancelText (ios only)            |           string (default Cancel)        | Cancel button text |\n| cropperCancelColor (ios only)           |           string (default tint `iOS` color )        | HEX format color for the Cancel button. Default value is the default tint iOS color [controlled by TOCropViewController](https://github.com/TimOliver/TOCropViewController/blob/a942414508012b13102f776eb65dac655f31cabb/Objective-C/TOCropViewController/Views/TOCropToolbar.m#L433) |\n| cropperRotateButtonsHidden (ios only)   |           bool (default false)           | Enable or disable cropper rotate buttons |\n\n\n#### Smart Album Types (ios)\n\nNOTE: Some of these types may not be available on all iOS versions. Be sure to check this to avoid issues.\n```\n['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']\n```\n\n### Response Object\n\n| Property                  |  Type  | Description                              |\n| ------------------------- | :----: | :--------------------------------------- |\n| path                      | string | Selected image location. This is null when the `writeTempFile` option is set to false. |\n| localIdentifier(ios only) | string | Selected images' localidentifier, used for PHAsset searching |\n| sourceURL(ios only)       | string | Selected images' source path, do not have write access |\n| filename                  | string | Selected images' filename                |\n| width                     | number | Selected image width                     |\n| height                    | number | Selected image height                    |\n| mime                      | string | Selected image MIME type (image/jpeg, image/png) |\n| size                      | number | Selected image size in bytes             |\n| duration                  | number | Video duration time in milliseconds      |\n| data                      | base64 | Optional base64 selected file representation |\n| exif                      | object | Extracted exif data from image. Response format is platform specific |\n| cropRect                  | object | Cropped image rectangle (width, height, x, y)    |\n| creationDate (ios only)   | string | UNIX timestamp when image was created    |\n| modificationDate          | string | UNIX timestamp when image was last modified |\n\n# Install\n\n## Step 1\n\n```bash\nnpm i react-native-image-crop-picker --save\n```\n\n## Step 2\n\n### iOS\n\n```bash\ncd ios\npod install\n```\n\n## Step 3\n\n### iOS\n\n#### Step 1\n\nIn Xcode open Info.plist and add string key `NSPhotoLibraryUsageDescription` with value that describes why you need access to user photos. More info here https://forums.developer.apple.com/thread/62229. Depending on what features you use, you also may need `NSCameraUsageDescription` and `NSMicrophoneUsageDescription` keys.\n  \n#### (Optional) Step 2 - To localize the camera / gallery / cropper text buttons\n\n- Open your Xcode project\n- Go to your project settings by opening the project name on the Navigation (left side)\n- Select your project in the project list\n- Should be into the Info tab and add in Localizations the language your app was missing throughout the +\n- Rebuild and you should now have your app camera and gallery with the classic ios text in the language you added.\n\n### Android\n\n- **VERY IMPORTANT** Add the following to your `build.gradle`'s repositories section and change Android SDK version to 33. (android/build.gradle)\n\n```gradle\nbuildscript {\n    ext {\n        buildToolsVersion = \"31.0.0\"\n        minSdkVersion = 21\n        compileSdkVersion = 33\n        targetSdkVersion = 33\n        ...\n    }\n}\n\nallprojects {\n    repositories {\n      mavenLocal()\n      jcenter()\n      maven { url \"$rootDir/../node_modules/react-native/android\" }\n\n      // ADD THIS\n      maven { url 'https://maven.google.com' }\n\n      // ADD THIS\n      maven { url \"https://www.jitpack.io\" }\n    }\n}\n```\n\n- Add `useSupportLibrary` (android/app/build.gradle)\n\n```gradle\nandroid {\n    ...\n\n    defaultConfig {\n        ...\n        vectorDrawables.useSupportLibrary = true\n        ...\n    }\n    ...\n}\n```\n\n- Minimum Gradle version if you are using react-native-image-crop-picker \u003e= 0.35.0\n\n```\n3.3.3\n3.4.3\n3.5.4\n3.6.4\n4.0.1\n```\n\nReference for more details https://github.com/ivpusic/react-native-image-crop-picker/issues/1406\n\n- [Optional] If you want to use camera picker in your project, add following to `app/src/main/AndroidManifest.xml`\n  - `\u003cuses-permission android:name=\"android.permission.CAMERA\"/\u003e`\n\n- [Optional] If you want to use front camera, also add following to `app/src/main/\nAndroidManifest.xml`\n  - `\u003cuses-feature android:name=\"android.hardware.camera\" android:required=\"false\" /\u003e`\n  - `\u003cuses-feature android:name=\"android.hardware.camera.front\" android:required=\"false\" /\u003e`\n\n## TO DO\n\n- [ ] [Android] Standardize multiple select\n- [ ] [Android] Video compression\n\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).\n\u003ca href=\"graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/contributors.svg?width=890\" /\u003e\u003c/a\u003e\n\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/react-native-image-crop-picker#backer)]\n\n\u003ca href=\"https://opencollective.com/react-native-image-crop-picker#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/react-native-image-crop-picker#sponsor)]\n\n\u003ca href=\"https://opencollective.com/react-native-image-crop-picker/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-image-crop-picker/sponsor/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/sponsor/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-image-crop-picker/sponsor/2/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/sponsor/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-image-crop-picker/sponsor/3/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/sponsor/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-image-crop-picker/sponsor/4/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/sponsor/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-image-crop-picker/sponsor/5/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/sponsor/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-image-crop-picker/sponsor/6/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/sponsor/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-image-crop-picker/sponsor/7/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/sponsor/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-image-crop-picker/sponsor/8/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/sponsor/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/react-native-image-crop-picker/sponsor/9/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/react-native-image-crop-picker/sponsor/9/avatar.svg\"\u003e\u003c/a\u003e\n\n\n\n## License\n*MIT*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivpusic%2Freact-native-image-crop-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivpusic%2Freact-native-image-crop-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivpusic%2Freact-native-image-crop-picker/lists"}