{"id":13725304,"url":"https://github.com/thomas-coldwell/expo-image-editor","last_synced_at":"2025-05-07T20:31:55.193Z","repository":{"id":37173547,"uuid":"266372196","full_name":"thomas-coldwell/expo-image-editor","owner":"thomas-coldwell","description":"A super simple image cropping and rotation tool for Expo that runs on iOS, Android and Web!","archived":true,"fork":false,"pushed_at":"2024-05-10T14:10:51.000Z","size":2461,"stargazers_count":164,"open_issues_count":42,"forks_count":33,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-07T21:16:22.946Z","etag":null,"topics":["expo","react-native","react-native-web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/thomas-coldwell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"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},"funding":{"ko_fi":"thomascoldwell"}},"created_at":"2020-05-23T16:08:51.000Z","updated_at":"2024-10-01T14:56:42.000Z","dependencies_parsed_at":"2023-02-15T05:45:45.633Z","dependency_job_id":"c2c67d69-2ffe-4a69-86e7-dd0921a9d25c","html_url":"https://github.com/thomas-coldwell/expo-image-editor","commit_stats":{"total_commits":195,"total_committers":6,"mean_commits":32.5,"dds":"0.24102564102564106","last_synced_commit":"c1f9ad8c6aa517ae180ad9f666ebab1427d92304"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-coldwell%2Fexpo-image-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-coldwell%2Fexpo-image-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-coldwell%2Fexpo-image-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-coldwell%2Fexpo-image-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thomas-coldwell","download_url":"https://codeload.github.com/thomas-coldwell/expo-image-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224645325,"owners_count":17346124,"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":["expo","react-native","react-native-web"],"created_at":"2024-08-03T01:02:18.720Z","updated_at":"2024-11-14T15:31:11.336Z","avatar_url":"https://github.com/thomas-coldwell.png","language":"TypeScript","funding_links":["https://ko-fi.com/thomascoldwell"],"categories":["JavaScript"],"sub_categories":[],"readme":"# 🌁 Expo Image Editor\n\nA super simple image cropping and rotation tool for Expo that runs on iOS, Android and Web!\n\n| ![Screenshot_20201013-161416](https://user-images.githubusercontent.com/31568400/95880744-c0ac9980-0d6f-11eb-8610-73d291f1013b.jpg) | ![Screenshot_20201013-161447](https://user-images.githubusercontent.com/31568400/95880752-c2765d00-0d6f-11eb-8345-ca7420fabf9b.jpg) | ![Screenshot_20201013-161347](https://user-images.githubusercontent.com/31568400/95880755-c30ef380-0d6f-11eb-9567-4eaf188a18d6.jpg) |\n| ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |\n\nCheck out the demo on Netlify \u003ca href=\"https://expo-image-cropping.netlify.app/\"\u003ehere\u003c/a\u003e\n\n## Installation\n\nTo get started install the package in your Expo project by running:\n\n```\nyarn add expo-image-editor\n```\n\nor\n\n```\nnpm i expo-image-editor\n```\n\n## Usage\n\nThe package exports a single component `ImageEditor` that can be placed anywhere in your project. This renders a modal that then returns the editing result when it is dismissed.\n\n```typescript\n// ...\nimport { ImageEditor } from \"expo-image-editor\";\n\nfunction App() {\n  const [imageUri, setImageUri] = useState(undefined);\n\n  const [editorVisible, setEditorVisible] = useState(false);\n\n  const selectPhoto = async () =\u003e {\n    // Get the permission to access the camera roll\n    const response = await ImagePicker.requestCameraRollPermissionsAsync();\n    // If they said yes then launch the image picker\n    if (response.granted) {\n      const pickerResult = await ImagePicker.launchImageLibraryAsync();\n      // Check they didn't cancel the picking\n      if (!pickerResult.cancelled) {\n        launchEditor(pickerResult.uri);\n      }\n    } else {\n      // If not then alert the user they need to enable it\n      Alert.alert(\n        \"Please enable camera roll permissions for this app in your settings.\"\n      );\n    }\n  };\n\n  const launchEditor = (uri: string) =\u003e {\n    // Then set the image uri\n    setImageUri(uri);\n    // And set the image editor to be visible\n    setEditorVisible(true);\n  };\n\n  return (\n    \u003cView\u003e\n      \u003cImage\n        style={{ height: 300, width: 300 }}\n        source={{ uri: imageData.uri }}\n      /\u003e\n      \u003cButton title=\"Select Photo\" onPress={() =\u003e selectPhoto()} /\u003e\n      \u003cImageEditor\n        visible={editorVisible}\n        onCloseEditor={() =\u003e setEditorVisible(false)}\n        imageUri={imageUri}\n        fixedCropAspectRatio={16 / 9}\n        lockAspectRatio={aspectLock}\n        minimumCropDimensions={{\n          width: 100,\n          height: 100,\n        }}\n        onEditingComplete={(result) =\u003e {\n          setImageData(result);\n        }}\n        mode=\"full\"\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n### Props\n\n| Name                        | Type     | Description                                                                                                                                                                      |\n| --------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| visible                     | boolean  | Whether the editor should be visible or not.                                                                                                                                     |\n| asView                      | boolean  | If `true` this will remove the modal wrapper and return the image editor in a regular `\u003cView /\u003e`                                                                                 |\n| mode                        | string   | Which mode to use the editor in can be either `full` or `crop-only`.                                                                                                             |\n| onCloseEditor               | function | Callback when the editor is dimissed - use this to set hide the editor.                                                                                                          |\n| imageUri                    | string   | The uri of the image to be edited                                                                                                                                                |\n| fixedCropAspectRatio        | number   | The starting aspect ratio of the cropping window.                                                                                                                                |\n| lockAspectRatio             | boolean  | Whether the cropping window should maintain this aspect ratio or not.                                                                                                            |\n| minimumCropDimensions       | object   | An object of `{width, height}` specifying the minimum dimensions of the crop window.                                                                                             |\n| onEditingComplete           | function | function that will return the result of the image editing which is an object identical to `imageData`                                                                            |\n| throttleBlur                | boolean  | Whether to throttle the WebGL update of the blur while adjusting (defaults to false) - useful to set to true on lower performance devices                                        |\n| allowedTransformOperations  | string[] | Which transform operations you want to exclusively allow to be used. Can include `crop` and `rotate` e.g. `['crop']` to only allow cropping                                      |\n| allowedAdjustmentOperations | string[] | Which image adjustment operations you want to exclusively allow to be used. Only `blur` can be specified at the minute e.g. `['blur']` yo only allow blur as an image adjustment |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomas-coldwell%2Fexpo-image-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomas-coldwell%2Fexpo-image-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomas-coldwell%2Fexpo-image-editor/lists"}