{"id":26943604,"url":"https://github.com/NitrogenZLab/react-native-photo-editor","last_synced_at":"2025-04-02T17:16:19.318Z","repository":{"id":37210170,"uuid":"391132117","full_name":"NitrogenZLab/react-native-photo-editor","owner":"NitrogenZLab","description":"🌄 Photo editor using native modules for iOS and Android. Inherit from 2 available libraries, ZLImageEditor (iOS) and PhotoEditor (Android)","archived":false,"fork":false,"pushed_at":"2024-05-15T09:17:23.000Z","size":46806,"stargazers_count":491,"open_issues_count":43,"forks_count":153,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-28T01:42:18.401Z","etag":null,"topics":["android","imageeditor","ios","photo","photoedit","photoeditor","react-native"],"latest_commit_sha":null,"homepage":"","language":"Swift","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/NitrogenZLab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","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":{"github":"baronha","patreon":"baronha","open_collective":null,"ko_fi":"baoha","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2021-07-30T16:41:44.000Z","updated_at":"2025-03-21T14:40:18.000Z","dependencies_parsed_at":"2024-05-15T22:26:59.410Z","dependency_job_id":"ea070015-34b6-4c54-85aa-2eb0a99606c5","html_url":"https://github.com/NitrogenZLab/react-native-photo-editor","commit_stats":{"total_commits":57,"total_committers":4,"mean_commits":14.25,"dds":"0.42105263157894735","last_synced_commit":"1ae0f6207d804cbd50c1471954a39912e352b891"},"previous_names":["nitrogenzlab/react-native-photo-editor","baronha/react-native-photo-editor"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitrogenZLab%2Freact-native-photo-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitrogenZLab%2Freact-native-photo-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitrogenZLab%2Freact-native-photo-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitrogenZLab%2Freact-native-photo-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NitrogenZLab","download_url":"https://codeload.github.com/NitrogenZLab/react-native-photo-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246856682,"owners_count":20844974,"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","imageeditor","ios","photo","photoedit","photoeditor","react-native"],"created_at":"2025-04-02T17:16:17.966Z","updated_at":"2025-04-02T17:16:19.309Z","avatar_url":"https://github.com/NitrogenZLab.png","language":"Swift","funding_links":["https://github.com/sponsors/baronha","https://patreon.com/baronha","https://ko-fi.com/baoha"],"categories":[],"sub_categories":[],"readme":"# React Native Photo Editor (RNPE)\n\n🌄 Image editor using native modules for iOS and Android. Inherit from 2 available libraries, [ZLImageEditor](https://github.com/longitachi/ZLImageEditor) (iOS) and [PhotoEditor](https://github.com/burhanrashid52/PhotoEditor) (Android)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./resources/banner1.jpg\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n# Note\n**The difference between the 2 platforms is huge - Be careful when using**\n\u003cbr/\u003e\nThis lib is for personal use, so if you customize your style or change something, Please fork this library and check the detailed documentation in the original library:\n\n- [iOS](https://github.com/longitachi/ZLImageEditor)\n- [Android](https://github.com/burhanrashid52/PhotoEditor)\n\n\u003e During the development of this package. I was thinking of moving it as part of [an earlier library](https://github.com/baronha/react-native-multiple-image-picker) that I finished. If the support community for this library was large enough, I would have to dismiss this idea immediately.\n\n\u003e Previously this library used [Brightroom](https://github.com/muukii/Brightroom) as the native library for iOS. If you want to use Brightroom you can check it out [here](https://github.com/baronha/react-native-photo-editor/releases/tag/0.1.2).\n\n## Feature 🙈\n\n###  Both\n- Draw (Support custom line color).\n- Adding/Editing **Text** with option to change its Color.\n- Adding **Images/Stickers**\n- Pinch to Scale and Rotate views.\n\n### iOS\n- Apply Filter Effect on image using [LUT Color](#custom-filtersios) (Custom filter is simpler than android)\n- Crop image.\n### Android\n- Drawing on image with option to change its Brush's Color, Size, Opacity, Erasing and basic shapes.\n- Apply Filter Effect on image using [MediaEffect](https://developer.android.com/reference/android/media/effect/EffectFactory). But in the future will change to LUT color.\n\n## Video Demo 📺\n| iOS |  Android  |\n| -------- | :----: |\n| \u003cvideo src=\"https://user-images.githubusercontent.com/23580920/139821324-386a08ae-4adf-4d8a-a382-352cdff6ae1c.mp4\" /\u003e | \u003cvideo src=\"https://user-images.githubusercontent.com/23580920/139927272-72e43ced-6690-4c52-a650-9169ee371cb0.mov\" /\u003e |\n\n## ScreenShot 👉👈\n### iOS\n\u003cdiv style=\"display: flex; flex-direction: row\"\u003e\n  \u003cimg src=\"resources/tools_ios.png\" width=\"32%\"\u003e\n  \u003cimg src=\"resources/filters_ios.png\" width=\"32%\"\u003e\n  \u003cimg src=\"resources/sticker_ios.png\" width=\"32%\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n### Android\n\n\u003cdiv style=\"display: flex; flex-direction: row\"\u003e\n  \u003cimg src=\"resources/tools_android.png\" width=\"32%\"\u003e\n  \u003cimg src=\"resources/filters_android.png\" width=\"32%\"\u003e\n  \u003cimg src=\"resources/sticker_android.png\" width=\"32%\"\u003e\n\u003c/div\u003e\n\n## Requirements\n\n* Swift 5.1+ (Xcode12.4+)\n* iOS 12+\n\n## Installation\n\n```sh\nyarn add @baronha/react-native-photo-editor\n```\n\n### iOS\n\nThe Swift pod `@baronha/react-native-photo-editor` depends upon `SDWebImage` and `SDWebImageWebPCoder`, which do not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers =\u003e true` for particular dependencies:\n\n```\npod 'SDWebImage', :modular_headers =\u003e true\npod 'SDWebImageWebPCoder', :modular_headers =\u003e true\n```\nThen run ```cd ios/ \u0026\u0026 pod install```\n\n\n\u003e Don't forget add file [.swift](https://stackoverflow.com/questions/52536380/why-linker-link-static-libraries-with-errors-ios) in your project (and create bridging header file swift).\n\n## Usage\n\n```js\nimport PhotoEditor from \"@baronha/react-native-photo-editor\";\n\n// ...\n\nconst result = await PhotoEditor.open(Options);\n```\n## Options\n\n| Property |  Type  | Default value | Platform | Description      |\n| -------- | :----: | :-----------: | :------: | :--------------- |\n| path      | string |   required    |   both   | Local/remote image path |\n| [stickers](#stickers-)      | Array\u003cString\u003e |   []    |   both   | An array of paths containing sticker images |\n\n## Filters 🌈\n| iOS | Android |\n| :---------------------------------: | :-------------------------------------: |\n| ![](resources/filters_ios.png) | \u003cimg src=\"resources/filters_android.png\" width=\"87.5%\" /\u003e |\n\n### Custom Filters(iOS)\n#### LUT (Hald image)\n\n[How to create cube data from LUT Image](https://www.notion.so/CoreImage-How-to-create-cube-data-from-LUT-Image-for-CIColorCube-CIColorCubeWithColorSpace-9e554fd418e8463abb25d6232613ac1c)\n\nWe can download the neutral LUT image from [lutCreator.js](https://sirserch.github.io/lut-creator-js/#).\n#### [Hald Images](https://3dlutcreator.com/3d-lut-creator---materials-and-luts.html)\n\u003e Hald is a graphical representation of 3D LUT in a form of a color table which contains all of the color gradations of 3D LUT. If Hald is loaded into editing software and a color correction is applied to it, you can use 3D LUT Creator to convert your Hald into 3D LUT and apply it to a photo or a video in your editor.\n\n[Detailed documentations are available on here](https://www.notion.so/Creating-your-own-filters-LUT-d1942f2f5bcc44d88481d0a0cc4aacb3#d7bba7a891234ea48f1854b5e555366a)\n\n**IMPORTANT**\nYou have to create ```LUTs.bundle``` and add all your LUT Photo(Re-name your LUT Photo follow this format: [LUT_64_FILTER_NAME](https://github.com/baronha/react-native-photo-editor/tree/master/resources/LUTs.bundle)) into ```LUTs.bundle```. Then add ```LUTs.bundle``` into ```Copy Bundle Resources```. [See detail](https://github.com/baronha/react-native-photo-editor/tree/master/example/ios)\n\n## Stickers 🤌\n### Remote\nYou need to pass an array of image urls to the sticker parameter in [options](#options)\n[Example](https://github.com/baronha/react-native-photo-editor/blob/dev/example/src/assets/data/stickers.json):\n```\n[\n  \"https://cdn-icons-png.flaticon.com/512/5272/5272912.png\",\n  \"https://cdn-icons-png.flaticon.com/512/5272/5272913.png\",\n  \"https://cdn-icons-png.flaticon.com/512/5272/5272916.png\",\n  ...\n]\n```\n### Local\n\n#### iOS\nYou have to create ```Stickers.bundle``` and add all your sticker into ```Stickers.bundle```. Then add ```Stickers.bundle``` into ```Copy Bundle Resources```.\n  [See detail](https://github.com/baronha/react-native-photo-editor/tree/master/example/ios)\n    \u003cbr\u003e\n    \u003cbr\u003e\n![](resources/sticker_tutorial_ios.png)\n\n#### Android\nYou have to create ```Stickers``` folder inside ```assets``` folder. Then drag or copy all sticker in to ```Sticker``` folder.\n  [See detail](https://github.com/baronha/react-native-photo-editor/tree/master/example/android/app/src/main/assets/Stickers)\n  \u003cbr\u003e\n   \u003cbr\u003e\n  ![](resources/sticker_tutorial_android.png)\n## To Do\n\n- [ ] Lut Color in android.\n- [ ] Crop Image in android.\n\n## Performance\n\nWe're trying to improve performance. If you have a better solution, please open a [issue](https://github.com/baronha/react-native-photo-editor/issues)\nor [pull request](https://github.com/baronha/react-native-photo-editor/pulls). Best regards!\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## Contributors ✨\n\nThanks go to these wonderful people:\n\n\u003c!-- readme: collaborators,contributors -start --\u003e\n\u003ctable\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/tuanngocptn\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/22292704?v=4\" width=\"100;\" alt=\"tuanngocptn\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eNick - Ngoc Pham\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/baronha\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/23580920?v=4\" width=\"100;\" alt=\"baronha\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eBảo Hà.\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/abhishek-infobeans\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/66667656?v=4\" width=\"100;\" alt=\"abhishek-infobeans\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eabhishek-infobeans\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n            \u003ctd align=\"center\"\u003e\n                \u003ca href=\"https://github.com/Bassiuz\"\u003e\n                    \u003cimg src=\"https://avatars.githubusercontent.com/u/8895636?v=4\" width=\"100;\" alt=\"Bassiuz\"/\u003e\n                    \u003cbr /\u003e\n                    \u003csub\u003e\u003cb\u003eBas de Vaan\u003c/b\u003e\u003c/sub\u003e\n                \u003c/a\u003e\n            \u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003ctbody\u003e\n\u003c/table\u003e\n\u003c!-- readme: collaborators,contributors -end --\u003e\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNitrogenZLab%2Freact-native-photo-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNitrogenZLab%2Freact-native-photo-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNitrogenZLab%2Freact-native-photo-editor/lists"}