ReactNative: Native Photo Editor (Android/iOS)
If this project has helped you out, please support us with a star 🌟
- Cropping
- Adding Images -Stickers-
- Adding Text with Colors
- Drawing with Colors
- Scaling and Rotating Objects
- Deleting Objects
- Saving to Photos and Sharing
- Cool Animations
$ yarn add react-native-photo-editor
RN60 above please use
react-native-photo-editor
V1 and above
- iOS
iOS Prerequisite: Please make sure
CocoaPods
is installed on your system
- Add the following to your `Podfile` -> `ios/Podfile` and run pod update:
use_native_modules!
pod 'RNPhotoEditor', :path => '../node_modules/react-native-photo-editor/ios'
use_frameworks! :linkage => :static
pod 'iOSPhotoEditor', :git => 'https://github.com/prscX/photo-editor', :branch => 'master'
post_install do |installer|
installer.pods_project.targets.each do |target|
if target.name.include?('iOSPhotoEditor')
target.build_configurations.each do |config|
config.build_settings['SWIFT_VERSION'] = '5'
end
end
end
end
# Follow [Flipper iOS Setup Guidelines](https://fbflipper.com/docs/getting-started/ios-native)
# This is required because iOSPhotoEditor is implemented using Swift and we have to use use_frameworks! in Podfile
$static_framework = ['FlipperKit', 'Flipper', 'Flipper-Folly',
'CocoaAsyncSocket', 'ComponentKit', 'Flipper-DoubleConversion',
'Flipper-Glog', 'Flipper-PeerTalk', 'Flipper-RSocket', 'Yoga', 'YogaKit',
'CocoaLibEvent', 'OpenSSL-Universal', 'boost-for-react-native']
pre_install do |installer|
Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
installer.pod_targets.each do |pod|
if $static_framework.include?(pod.name)
def pod.build_type;
Pod::BuildType.static_library
end
end
end
end
-
Please make sure Flipper iOS Setup Guidelines steps are added to Podfile, since iOSPhotoEditor is implemented using Swift and we have to use use_frameworks! in Podfile
-
If using React Native Firebase v6+, please see
Troubleshooting
section for a known issue before moving further. -
Add below property to your info.list
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Application needs permission to write photos...</string>
<!-- If you are targeting devices running on iOS 10 or later, you'll also need to add: -->
<key>NSPhotoLibraryUsageDescription</key>
<string>iOS 10 needs permission to write photos...</string>
-
Android
-
Please add below script in your build.gradle
buildscript {
repositories {
maven { url "https://jitpack.io" }
...
}
}
allprojects {
repositories {
maven { url "https://jitpack.io" }
...
}
}
- Add below activity in your app activities:
<activity android:name="com.ahmedadeltito.photoeditor.PhotoEditorActivity" /> <activity android:name="com.yalantis.ucrop.UCropActivity" />
- To save image to the public external storage, you must request the WRITE_EXTERNAL_STORAGE permission in your manifest file:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
RN60 below please use
react-native-photo-editor
V.0.*
$ react-native link react-native-photo-editor
- Android
- Please add below script in your build.gradle
buildscript {
repositories {
jcenter()
maven { url "https://maven.google.com" }
maven { url "https://jitpack.io" }
...
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven { url "https://maven.google.com" }
maven { url "https://jitpack.io" }
...
}
}
- Please add below script in your app/build.gradle
android {
...
defaultConfig {
...
renderscriptSupportModeEnabled true
}
}
- Add below activity in your app activites:
<activity android:name="com.ahmedadeltito.photoeditor.PhotoEditorActivity" /> <activity android:name="com.yalantis.ucrop.UCropActivity" />
- To save image to the public external storage, you must request the WRITE_EXTERNAL_STORAGE permission in your manifest file:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
Note: Android SDK 27 > is supported
-
iOS
iOS Prerequisite: Please make sure CocoaPods is installed on your system
- After
react-native link react-native-photo-editor
, please verifynode_modules/react-native-photo-editor/ios/
containsPods
folder. If does not exist please executepod install
command onnode_modules/react-native-photo-editor/ios/
, if any error => trypod repo update
thenpod install
- After verification, open your project and create a folder 'RNPhotoEditor' under Libraries.
- Drag
node_modules/react-native-photo-editor/ios/pods/Pods.xcodeproject
into RNPhotoEditor, as well as the RNPhotoEditor.xcodeproject if it does not exist. - Add the
iOSPhotoEditor.framework
into your project'sEmbedded Binaries
and make sure the framework is also in linked libraries. - Go to your project's
Build Settings -> Frameworks Search Path
and add${BUILT_PRODUCTS_DIR}/iOSPhotoEditor
non-recursive. - Add below property to your info.list
- After
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Application needs permission to write photos...</string>
<!-- If you are targeting devices running on iOS 10 or later, you'll also need to add: -->
<key>NSPhotoLibraryUsageDescription</key>
<string>iOS 10 needs permission to write photos...</string>
- Now build your iOS app through Xcode
If you want stickers, please add them to your native project:
- iOS: Add stickers to iOS Resources folder
- Android: Add stickers to app
drawable
folder
Refer Example project for the same.