{"id":15019771,"url":"https://github.com/blazerroadg/react-native-image-video-picker-editor","last_synced_at":"2025-05-02T12:32:22.673Z","repository":{"id":50376777,"uuid":"272936476","full_name":"blazerroadg/react-native-image-video-picker-editor","owner":"blazerroadg","description":"iOS/Android image picker with support for camera, video, configurable compression, multiple images,image cropping , video trimming, max video length, photo take, video record, profile mask view","archived":false,"fork":false,"pushed_at":"2020-10-19T21:05:26.000Z","size":9348,"stargazers_count":68,"open_issues_count":0,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-19T11:11:39.999Z","etag":null,"topics":["android","image-cropper","image-editor","image-picker","imagepicker","ios","max-video-lenght","photo","react-native","video","video-compressor","video-picker","video-record","video-trimmer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blazerroadg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-17T09:46:20.000Z","updated_at":"2025-03-17T18:11:32.000Z","dependencies_parsed_at":"2022-08-27T22:31:16.106Z","dependency_job_id":null,"html_url":"https://github.com/blazerroadg/react-native-image-video-picker-editor","commit_stats":null,"previous_names":["blazerroad/react-native-image-video-picker-editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blazerroadg%2Freact-native-image-video-picker-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blazerroadg%2Freact-native-image-video-picker-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blazerroadg%2Freact-native-image-video-picker-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blazerroadg%2Freact-native-image-video-picker-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blazerroadg","download_url":"https://codeload.github.com/blazerroadg/react-native-image-video-picker-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252038272,"owners_count":21684665,"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","image-cropper","image-editor","image-picker","imagepicker","ios","max-video-lenght","photo","react-native","video","video-compressor","video-picker","video-record","video-trimmer"],"created_at":"2024-09-24T19:54:02.913Z","updated_at":"2025-05-02T12:32:17.647Z","avatar_url":"https://github.com/blazerroadg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-image-video-picker-editor\n\n\niOS/Android image picker with support for camera, video, configurable compression, multiple images,image cropping , video trimming, max video lenght, photo take, video record, profile mask view\n## Result\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=200 title=\"iOS Single Pick\" src=\"https://github.com/blazerroad/react-native-image-video-picker-editor/blob/master/gifs/demo1.gif\"\u003e\n  \u003cimg width=200 title=\"iOS Multiple Pick\" src=\"https://github.com/blazerroad/react-native-image-video-picker-editor/blob/master/gifs/demo2.gif\"\u003e\n  \u003cimg width=200 title=\"iOS Crop Normal\" src=\"https://github.com/blazerroad/react-native-image-video-picker-editor/blob/master/gifs/demo3.gif\"\u003e\n  \u003cimg width=200 title=\"iOS Crop Circular\" src=\"https://github.com/blazerroad/react-native-image-video-picker-editor/blob/master/gifs/demo4.gif\"\u003e\n\u003c/p\u003e\n\n## Important note\n\nI never try it with  react-native \u003c 0.60 \n\n# Install\n\n## Step 1\n\n```bash\nnpm i react-native-image-video-picker-editor --save\n```\n\n## Step 2 Dependencies\n```bash\nnpm install @react-native-community/cameraroll @react-native-community/image-editor @react-native-community/masked-view react-native-camera react-native-vector-icons react-native-video react-native-video-helper react-native-easy-view-transformer\n```\n\n### iOS\n\n```bash\ncd ios\npod install\n```\n\n### Android\n\n- **VERY IMPORTANT** Add the following to your `build.gradle`'s . (android/App/build.gradle)\n\n```gradle\n\nandroid {\n  ...\n  defaultConfig {\n    ...\n    missingDimensionStrategy 'react-native-camera', 'general' // \u003c--- insert this line\n  }\n}\n\n```\n\n## Step 3 link assests\n```bash\nreact-native link\n```\n\n## Step 4 Permissions\n\n### iOS add these to info.plist\n\n```bash\nPrivacy - Photo Library Usage Description  (NSPhotoLibraryUsageDescription)\nPrivacy - Camera Usage Description (NSCameraUsageDescription)\nPrivacy - Microphone Usage Description (NSMicrophoneUsageDescription)\n```\n\n\n### Android add these to android/app/src/main/AndroidManifest.xml\n\n```bash\n\u003cuses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/\u003e\n\u003cuses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/\u003e\n\u003cuses-permission android:name=\"android.permission.CAMERA\"/\u003e\n\u003cuses-permission android:name=\"android.permission.RECORD_AUDIO\"/\u003e\n```\n\n# Manual Installation \nplease follow each dependensy document : \n\n- https://www.npmjs.com/package/@react-native-community/cameraroll\n- https://github.com/react-native-community/react-native-image-editor\n- https://github.com/react-native-community/react-native-masked-view\n- https://github.com/react-native-community/react-native-camera\n- https://github.com/oblador/react-native-vector-icons\n- https://github.com/react-native-community/react-native-video\n- https://github.com/classapp/react-native-video-helper\n- https://github.com/Luehang/react-native-easy-view-transformer\n\n\n\n## Usage\n\nImport library\n\n```javascript\nimport MImagePicker from 'react-native-image-video-picker-editor'\nimport { HandleCrop } from 'react-native-image-video-picker-editor/cropper'\n```\n\n\n\n```javascript\n\u003cMImagePicker\n    header={{ nextTitle: \"Next\", cancelTitle: \"Cancel\" }}\n    onCancel={() =\u003e { }}\n    onNext={async (param) =\u003e {\n      param.videoMaxLen = 3; // not set or 0 for unlimited\n      param.videoQuality = 'low';\n      const res = await HandleCrop(param);\n      this.setState({ result: res, showResult: true })\n    }}\n    cropSize={{ width: 200, height: 200 }}\n    maxScale={10}  \n    max={4}\n    cameraConfig = {{ camerPhotoTile: \"Photo\", cameraVideoTitle: \"Video\", cameraCancelTitle: \"Cancle\", maxVideoLen: 0, videoQuality: \"480p\" }}\n  // profile={true}\n\n  /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazerroadg%2Freact-native-image-video-picker-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblazerroadg%2Freact-native-image-video-picker-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazerroadg%2Freact-native-image-video-picker-editor/lists"}