{"id":18974351,"url":"https://github.com/bkdev98/react-native-image-zoom-and-crop","last_synced_at":"2026-04-08T14:30:22.288Z","repository":{"id":57337643,"uuid":"430335818","full_name":"bkdev98/react-native-image-zoom-and-crop","owner":"bkdev98","description":null,"archived":false,"fork":false,"pushed_at":"2021-11-22T03:25:40.000Z","size":112,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-02T03:51:12.153Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-image-zoom-and-crop","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/bkdev98.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":"2021-11-21T10:32:42.000Z","updated_at":"2021-11-22T03:25:43.000Z","dependencies_parsed_at":"2022-09-14T15:12:01.194Z","dependency_job_id":null,"html_url":"https://github.com/bkdev98/react-native-image-zoom-and-crop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkdev98%2Freact-native-image-zoom-and-crop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkdev98%2Freact-native-image-zoom-and-crop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkdev98%2Freact-native-image-zoom-and-crop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkdev98%2Freact-native-image-zoom-and-crop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bkdev98","download_url":"https://codeload.github.com/bkdev98/react-native-image-zoom-and-crop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239971885,"owners_count":19727260,"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":[],"created_at":"2024-11-08T15:14:49.771Z","updated_at":"2026-04-08T14:30:20.220Z","avatar_url":"https://github.com/bkdev98.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-image-zoom-and-crop\n\n## Installation\n\n```\nyarn add react-native-image-zoom-and-crop react-native-reanimated react-native-gesture-handler @react-native-community/image-editor\n```\n\n## Usage\n\n```javascript\nimport React, { useState } from 'react';\nimport {\n  StyleSheet,\n  View,\n  Button,\n  Dimensions,\n} from 'react-native';\n\nimport ImageZoomAndCrop from 'react-native-image-zoom-and-crop';\n\nconst { width, height } = Dimensions.get('window');\n\nconst IMAGE_URI = 'https://avatars.githubusercontent.com/u/16166195';\n\nconst styles = StyleSheet.create({\n  wrapper: {\n    flex: 1,\n    justifyContent: 'center',\n    backgroundColor: 'black',\n  },\n\n  buttonWrapper: {\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n  },\n});\n\nconst App = () =\u003e {\n  const [cropperParams, setCropperParams] = useState({});\n\n  const handleCropPress = async () =\u003e {\n    const cropSize = {\n      width: width / 2,\n      height: height / 2,\n    };\n\n    try {\n      const result = await ImageZoomAndCrop.crop({\n        ...cropperParams,\n        imageUri: IMAGE_URI,\n        cropSize,\n        cropAreaSize: { width, height },\n      });\n\n      console.log(result);\n    } catch (error) {\n      console.log(error);\n    }\n  };\n\n  return (\n    \u003cView style={styles.wrapper}\u003e\n      \u003cImageZoomAndCrop\n        imageUri={IMAGE_URI}\n        cropAreaWidth={width}\n        cropAreaHeight={height}\n        setCropperParams={setCropperParams}\n      /\u003e\n      \u003cView style={styles.buttonWrapper}\u003e\n        \u003cButton onPress={handleCropPress} title=\"Crop It!\" color=\"pink\" /\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkdev98%2Freact-native-image-zoom-and-crop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbkdev98%2Freact-native-image-zoom-and-crop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkdev98%2Freact-native-image-zoom-and-crop/lists"}