{"id":26472600,"url":"https://github.com/cloudtenlabs/react-native-expo-image-cropper","last_synced_at":"2025-03-19T21:35:00.042Z","repository":{"id":38917041,"uuid":"242146747","full_name":"cloudtenlabs/react-native-expo-image-cropper","owner":"cloudtenlabs","description":"Beautiful React-Native Expo Image Cropper","archived":false,"fork":false,"pushed_at":"2022-12-06T16:16:41.000Z","size":4280,"stargazers_count":22,"open_issues_count":19,"forks_count":21,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-06T06:49:47.882Z","etag":null,"topics":["android","crop-image","cropper","expo","flip-image","image-manipulation","image-processing","imagecropper","imagecropping","ios","javascript","react","react-native","rotate-image"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-expo-image-cropper","language":"JavaScript","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/cloudtenlabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-21T13:35:07.000Z","updated_at":"2024-10-22T10:48:26.000Z","dependencies_parsed_at":"2023-01-24T08:30:53.357Z","dependency_job_id":null,"html_url":"https://github.com/cloudtenlabs/react-native-expo-image-cropper","commit_stats":null,"previous_names":["cloudtenlabs/react-native-expo-image-cropper"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudtenlabs%2Freact-native-expo-image-cropper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudtenlabs%2Freact-native-expo-image-cropper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudtenlabs%2Freact-native-expo-image-cropper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudtenlabs%2Freact-native-expo-image-cropper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudtenlabs","download_url":"https://codeload.github.com/cloudtenlabs/react-native-expo-image-cropper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244227537,"owners_count":20419257,"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-image","cropper","expo","flip-image","image-manipulation","image-processing","imagecropper","imagecropping","ios","javascript","react","react-native","rotate-image"],"created_at":"2025-03-19T21:34:59.447Z","updated_at":"2025-03-19T21:35:00.030Z","avatar_url":"https://github.com/cloudtenlabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact Native Expo Image Cropper\u003c/h1\u003e\n\u003cp align=\"center\"\u003eiOS and Android\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n   \u003cbr/\u003e\n   \u003cbr/\u003e\n   \u003cbr/\u003e\n   \u003cbr/\u003e\n   \u003ca href=\"https://github.com/cloudtenlabs/react-native-expo-image-cropper\"\u003e\u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/expo-image-crop.svg\"/\u003e\u003c/a\u003e\n   \u003ca href=\"https://github.com/cloudtenlabs/react-native-expo-image-cropper\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/badge/platform-ios%2Fandroid-blue.svg\"/\u003e\u003c/a\u003e\n   \u003ca href=\"https://github.com/cloudtenlabs/react-native-expo-image-cropper\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/badge/license-MIT-lightgrey.svg\"/\u003e\u003c/a\u003e\n   \u003cp align=\"center\"\u003e\n      \u003ca href=\"https://youtu.be/Zi46ASsb6Eg\"\u003e\u003cimg alt=\"image editing tools\" src=\"tools.png\"/\u003e\u003c/a\u003e\n      \u003ca href=\"https://youtu.be/Zi46ASsb6Eg\"\u003e\u003cimg alt=\"cropping mode\" src=\"crop_mode.png\"/\u003e\u003c/a\u003e   \n      \u003cbr/\u003e\n      \u003ca href=\"https://youtu.be/Zi46ASsb6Eg\"\u003eWatch Video!\u003c/a\u003e\n      \u003cbr/\u003e\n   \u003c/p\u003e\n   \u003ca href=\"https://exp.host/@wang90925/react-native-expo-image-cropper\"\u003eOpen on your device!\u003c/a\u003e\n\u003c/p\u003e\n\n### Install Dependences\n- yarn add react-native-expo-image-cropper\n\n## Example\n\n```javascript\nimport React from 'react'\nimport { Dimensions, TouchableOpacity, ImageBackground } from 'react-native'\nimport { ExpoImageManipulator } from 'react-native-expo-image-cropper'\n\nexport default class App extends React.Component {\n  state = {\n      showModal: false,\n      uri: 'https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png',\n  }\n  onToggleModal = () =\u003e {\n      const { showModal } = this.state\n      this.setState({ showModal: !showModal })\n  }\n  render() {\n      const { uri, showModal } = this.state\n      const { width, height } = Dimensions.get('window')\n      return (\n          \u003cImageBackground\n              resizeMode=\"contain\"\n              style={{\n                  justifyContent: 'center', padding: 20, alignItems: 'center', height, width, backgroundColor: 'black',\n              }}\n              source={{ uri }}\n          \u003e\n                \u003cTouchableOpacity title=\"Open Image Editor\" onPress={() =\u003e this.setState({ showModal: true })} /\u003e\n                \u003cExpoImageManipulator\n                    photo={{ uri }}\n                    isVisible={showModal}\n                    onPictureChoosed={(data) =\u003e {\n                        this.setState({ uri: data.uri })\n                    }}\n                    onToggleModal={() =\u003e this.setState({ showModal: !showModal })}\n                    saveOptions={{\n                        compress: 1,\n                        format: 'png',\n                        base64: true,\n                    }}\n                /\u003e\n          \u003c/ImageBackground\u003e\n      )\n  }\n}\n```\n\n## Run the example!\n- Clone this repository\n- cd example/\n- run yarn or npm install\n- enjoy!\n\n\n## Requirements\n* Use it into Expo app (from expo client, Standalone app or ExpoKit app).\n* Because we need to have access to `Expo.ImageManipulator`\n* Only Expo SDK 33 or Higher\n\n## Features\n* Crop and rotate image with `Expo.ImageManipulator`\n\n## Kown Issues\n\n## If you have some problem open a issue\n\n## TO DO\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudtenlabs%2Freact-native-expo-image-cropper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudtenlabs%2Freact-native-expo-image-cropper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudtenlabs%2Freact-native-expo-image-cropper/lists"}