{"_id":"@ahtesham2000/react-native-photo-editor-minimal","name":"@ahtesham2000/react-native-photo-editor-minimal","dist-tags":{"latest":"1.1.6"},"versions":{"1.1.6":{"name":"@ahtesham2000/react-native-photo-editor-minimal","version":"1.1.6","description":"🌄 Image editor using native modules for iOS and Android","main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"test":"jest","typescript":"tsc --noEmit","lint":"eslint \"**/*.{js,ts,tsx}\"","prepare":"bob build","release":"release-it","example":"yarn --cwd example","pods":"cd example && pod-install --quiet","bootstrap":"yarn example && yarn && yarn pods"},"keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/ahtesham-clcbws/react-native-photo-editor-minimal.git"},"author":{"name":"Baron Ha.","email":"baronn.ha@gmail.com","url":"https://github.com/ahtesham2000"},"license":"MIT","bugs":{"url":"https://github.com/ahtesham-clcbws/react-native-photo-editor-minimal/issues"},"homepage":"https://github.com/ahtesham-clcbws/react-native-photo-editor-minimal#readme","publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@commitlint/config-conventional":"^11.0.0","@react-native-community/eslint-config":"^2.0.0","@release-it/conventional-changelog":"^2.0.0","@types/jest":"^26.0.0","@types/react":"^16.9.19","@types/react-native":"0.62.13","commitlint":"^11.0.0","eslint":"^7.2.0","eslint-config-prettier":"^7.0.0","eslint-plugin-prettier":"^3.1.3","jest":"^26.0.1","pod-install":"^0.1.0","prettier":"^2.0.5","react":"16.13.1","react-native":"0.63.4","react-native-builder-bob":"^0.18.1","release-it":"^14.2.2","typescript":"^4.1.3"},"peerDependencies":{"react":"*","react-native":"*"},"jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"husky":{"hooks":{"commit-msg":"commitlint -E HUSKY_GIT_PARAMS","pre-commit":"yarn lint && yarn typescript"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"eslintConfig":{"root":true,"extends":["@react-native-community","prettier"],"rules":{"prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false}]}},"eslintIgnore":["node_modules/","lib/"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]},"directories":{"lib":"lib"},"_id":"@ahtesham2000/react-native-photo-editor-minimal@1.1.6","gitHead":"c6facd19683f86dbc9ac9601e989ceec6cf586c8","_nodeVersion":"20.12.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-uAanJhzefjaH3RAeNaJMXmnCR3vh4BcOEWA1zSdzJuT7BlzV3/o1Dx/qdbnV5zPPCSjAE3atY6akF8LNkelNZw==","shasum":"83014a6a99c5386150ad389901722f3a8e7da4d8","tarball":"https://registry.npmjs.org/@ahtesham2000/react-native-photo-editor-minimal/-/react-native-photo-editor-minimal-1.1.6.tgz","fileCount":214,"unpackedSize":3917269,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICs2LOTBz2tXExRq8ymR4Or9tAyM6hEBGLiqC2MuQiFYAiA5URnay4DlNz12GIBQKXdD8XXetCtRGCbIpSk0g52FCA=="}]},"_npmUser":{"name":"ahtesham2000","email":"ahtesham2000@gmail.com"},"maintainers":[{"name":"ahtesham2000","email":"ahtesham2000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-photo-editor-minimal_1.1.6_1720707111256_0.9118393690851048"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-11T14:11:51.158Z","1.1.6":"2024-07-11T14:11:51.547Z","modified":"2024-07-11T14:11:51.783Z"},"maintainers":[{"name":"ahtesham2000","email":"ahtesham2000@gmail.com"}],"description":"🌄 Image editor using native modules for iOS and Android","homepage":"https://github.com/ahtesham-clcbws/react-native-photo-editor-minimal#readme","keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/ahtesham-clcbws/react-native-photo-editor-minimal.git"},"author":{"name":"Baron Ha.","email":"baronn.ha@gmail.com","url":"https://github.com/ahtesham2000"},"bugs":{"url":"https://github.com/ahtesham-clcbws/react-native-photo-editor-minimal/issues"},"license":"MIT","readme":"## This is the fork package of [React Native Photo Editor (RNPE)](https://www.npmjs.com/package/@baronha/react-native-photo-editor)\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<p align=\"center\">\n  <img src=\"./resources/banner1.jpg\" width=\"100%\">\n</p>\n\n# Note\n**The difference between the 2 platforms is huge - Be careful when using**\n<br/>\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> During the development of this package. I was thinking of moving it as part of [an earlier library](https://github.com/ahtesham2000/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> 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/ahtesham2000/react-native-photo-editor-minimal/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| <video src=\"https://user-images.githubusercontent.com/23580920/139821324-386a08ae-4adf-4d8a-a382-352cdff6ae1c.mp4\" /> | <video src=\"https://user-images.githubusercontent.com/23580920/139927272-72e43ced-6690-4c52-a650-9169ee371cb0.mov\" /> |\n\n## ScreenShot 👉👈\n### iOS\n<div style=\"display: flex; flex-direction: row\">\n  <img src=\"resources/tools_ios.png\" width=\"32%\">\n  <img src=\"resources/filters_ios.png\" width=\"32%\">\n  <img src=\"resources/sticker_ios.png\" width=\"32%\">\n</div>\n\n<br>\n\n### Android\n\n<div style=\"display: flex; flex-direction: row\">\n  <img src=\"resources/tools_android.png\" width=\"32%\">\n  <img src=\"resources/filters_android.png\" width=\"32%\">\n  <img src=\"resources/sticker_android.png\" width=\"32%\">\n</div>\n\n## Requirements\n\n* Swift 5.1+ (Xcode12.4+)\n* iOS 12+\n\n## Installation\n\n```sh\nyarn add @ahtesham2000/react-native-photo-editor-minimal\n```\n\n### iOS\n\nThe Swift pod `@ahtesham2000/react-native-photo-editor-minimal` 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 => true` for particular dependencies:\n\n```\npod 'SDWebImage', :modular_headers => true\npod 'SDWebImageWebPCoder', :modular_headers => true\n```\nThen run ```cd ios/ && pod install```\n\n\n> 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 \"@ahtesham2000/react-native-photo-editor-minimal\";\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<String> |   []    |   both   | An array of paths containing sticker images |\n\n## Filters 🌈\n| iOS | Android |\n| :---------------------------------: | :-------------------------------------: |\n| ![](resources/filters_ios.png) | <img src=\"resources/filters_android.png\" width=\"87.5%\" /> |\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> 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/ahtesham2000/react-native-photo-editor-minimal/tree/master/resources/LUTs.bundle)) into ```LUTs.bundle```. Then add ```LUTs.bundle``` into ```Copy Bundle Resources```. [See detail](https://github.com/ahtesham2000/react-native-photo-editor-minimal/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/ahtesham2000/react-native-photo-editor-minimal/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/ahtesham2000/react-native-photo-editor-minimal/tree/master/example/ios)\n    <br>\n    <br>\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/ahtesham2000/react-native-photo-editor-minimal/tree/master/example/android/app/src/main/assets/Stickers)\n  <br>\n   <br>\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/ahtesham2000/react-native-photo-editor-minimal/issues)\nor [pull request](https://github.com/ahtesham2000/react-native-photo-editor-minimal/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## License\n\nMIT\n","readmeFilename":"README.md"}