https://github.com/nitrogenzlab/react-native-photo-editor
π Photo editor using native modules for iOS and Android. Inherit from 2 available libraries, ZLImageEditor (iOS) and PhotoEditor (Android)
https://github.com/nitrogenzlab/react-native-photo-editor
android imageeditor ios photo photoedit photoeditor react-native
Last synced: about 2 months ago
JSON representation
π Photo editor using native modules for iOS and Android. Inherit from 2 available libraries, ZLImageEditor (iOS) and PhotoEditor (Android)
- Host: GitHub
- URL: https://github.com/nitrogenzlab/react-native-photo-editor
- Owner: NitrogenZLab
- License: mit
- Created: 2021-07-30T16:41:44.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-15T09:17:23.000Z (about 1 year ago)
- Last Synced: 2025-04-09T18:15:59.503Z (about 2 months ago)
- Topics: android, imageeditor, ios, photo, photoedit, photoeditor, react-native
- Language: Swift
- Homepage:
- Size: 44.6 MB
- Stars: 495
- Watchers: 7
- Forks: 156
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Native Photo Editor (RNPE)
π 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)
# Note
**The difference between the 2 platforms is huge - Be careful when using**
This 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:
- [iOS](https://github.com/longitachi/ZLImageEditor)
- [Android](https://github.com/burhanrashid52/PhotoEditor)
> 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.
> 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).
## Feature π
### Both
- Draw (Support custom line color).
- Adding/Editing **Text** with option to change its Color.
- Adding **Images/Stickers**
- Pinch to Scale and Rotate views.
### iOS
- Apply Filter Effect on image using [LUT Color](#custom-filtersios) (Custom filter is simpler than android)
- Crop image.
### Android
- Drawing on image with option to change its Brush's Color, Size, Opacity, Erasing and basic shapes.
- 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.
## Video Demo πΊ
| iOS | Android |
| -------- | :----: |
| | |
## ScreenShot ππ
### iOS
### Android
## Requirements
* Swift 5.1+ (Xcode12.4+)
* iOS 12+
## Installation
```sh
yarn add @baronha/react-native-photo-editor
```
### iOS
The 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 => true` for particular dependencies:
```
pod 'SDWebImage', :modular_headers => true
pod 'SDWebImageWebPCoder', :modular_headers => true
```
Then run ```cd ios/ && pod install```
> 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).
## Usage
```js
import PhotoEditor from "@baronha/react-native-photo-editor";
// ...
const result = await PhotoEditor.open(Options);
```
## Options
| Property | Type | Default value | Platform | Description |
| -------- | :----: | :-----------: | :------: | :--------------- |
| path | string | required | both | Local/remote image path |
| [stickers](#stickers-) | Array | [] | both | An array of paths containing sticker images |
## Filters π
| iOS | Android |
| :---------------------------------: | :-------------------------------------: |
|  | |
### Custom Filters(iOS)
#### LUT (Hald image)
[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)
We can download the neutral LUT image from [lutCreator.js](https://sirserch.github.io/lut-creator-js/#).
#### [Hald Images](https://3dlutcreator.com/3d-lut-creator---materials-and-luts.html)
> 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.
[Detailed documentations are available on here](https://www.notion.so/Creating-your-own-filters-LUT-d1942f2f5bcc44d88481d0a0cc4aacb3#d7bba7a891234ea48f1854b5e555366a)
**IMPORTANT**
You 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)
## Stickers π€
### Remote
You need to pass an array of image urls to the sticker parameter in [options](#options)
[Example](https://github.com/baronha/react-native-photo-editor/blob/dev/example/src/assets/data/stickers.json):
```
[
"https://cdn-icons-png.flaticon.com/512/5272/5272912.png",
"https://cdn-icons-png.flaticon.com/512/5272/5272913.png",
"https://cdn-icons-png.flaticon.com/512/5272/5272916.png",
...
]
```
### Local
#### iOS
You have to create ```Stickers.bundle``` and add all your sticker into ```Stickers.bundle```. Then add ```Stickers.bundle``` into ```Copy Bundle Resources```.
[See detail](https://github.com/baronha/react-native-photo-editor/tree/master/example/ios)
#### Android
You have to create ```Stickers``` folder inside ```assets``` folder. Then drag or copy all sticker in to ```Sticker``` folder.
[See detail](https://github.com/baronha/react-native-photo-editor/tree/master/example/android/app/src/main/assets/Stickers)
## To Do
- [ ] Lut Color in android.
- [ ] Crop Image in android.
## Performance
We're trying to improve performance. If you have a better solution, please open a [issue](https://github.com/baronha/react-native-photo-editor/issues)
or [pull request](https://github.com/baronha/react-native-photo-editor/pulls). Best regards!
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## Contributors β¨
Thanks go to these wonderful people:
Nick - Ngoc Pham
BαΊ£o HΓ .
abhishek-infobeans
Bas de Vaan
## License
MIT