There is a official blog about how to set it up, however, there are some errors inside it, and it is not up to date.
Even though there is an official demo repo, if you clone it, without correct instruction, you will still not be able to run it.
So I tried to give a detailed instruction about how to set it up with react native.
NOTE: You might need to run through all the steps below to make it work, not just clone it.
- install
react-native
react-native init TestNative
cd ./TestNative && react-native run-ios
- Then check everything is fine until now.
- Install the PhotoEditor SDK framework.
- Import it correctly into the Xcode
- Unlock License
- Try to run the demo
We can install it with pod
- create the
podfile
in./ios/
- add
target 'TestNative' do pod 'PhotoEditorSDK' end
- then install:
cd ./ios && pod install
- Then use Xcode open
TestNative.xcworkspace
insideios
folder - click
TestNative
, and go tobuilding setting
, findBuild Options
, setAlways Embed Swift Standard Libraries
to Yes
- Open Xcode (as described above)
- right click
TestNative
and chooseNew file
, chooseCocoa Touch Class
and Target set toTestNative
- PESDKModule.h
// // PESDKModule.h // TestNative // // Created by PascalSun on 31/7/18. // Copyright © 2018 Facebook. All rights reserved. // #import <React/RCTBridgeModule.h> #import <React/RCTEventEmitter.h> @interface PESDKModule : RCTEventEmitter <RCTBridgeModule> @end
- PESDKModule.m
// // PESDKModule.m // TestNative // // Created by PascalSun on 31/7/18. // Copyright © 2018 Facebook. All rights reserved. // #import "PESDKModule.h" #import <React/RCTUtils.h> #import <PhotoEditorSDK/PhotoEditorSDK.h> @interface PESDKModule () <PESDKPhotoEditViewControllerDelegate> @end @implementation PESDKModule RCT_EXPORT_MODULE(PESDK); RCT_EXPORT_METHOD(present:(NSString *)path) { dispatch_async(dispatch_get_main_queue(), ^{ PESDKPhotoEditViewController *photoEditViewController = [[PESDKPhotoEditViewController alloc] initWithPhotoAsset:[[PESDKPhoto alloc] initWithData:[NSData dataWithContentsOfFile:path]] configuration:[[PESDKConfiguration alloc] init]]; photoEditViewController.delegate = self; UIViewController *currentViewController = RCTPresentedViewController(); [currentViewController presentViewController:photoEditViewController animated:YES completion:NULL]; }); } #pragma mark - IMGLYPhotoEditViewControllerDelegate - (void)photoEditViewController:(PESDKPhotoEditViewController *)photoEditViewController didSaveImage:(UIImage *)image imageAsData:(NSData *)data { [photoEditViewController.presentingViewController dismissViewControllerAnimated:YES completion:^{ [self sendEventWithName:@"PhotoEditorDidSave" body:@{ @"image": [UIImageJPEGRepresentation(image, 1.0) base64EncodedStringWithOptions: 0], @"data": [data base64EncodedStringWithOptions:0] }]; }]; } - (void)photoEditViewControllerDidCancel:(PESDKPhotoEditViewController *)photoEditViewController { [photoEditViewController.presentingViewController dismissViewControllerAnimated:YES completion:^{ [self sendEventWithName:@"PhotoEditorDidCancel" body:@{}]; }]; } - (void)photoEditViewControllerDidFailToGeneratePhoto:(PESDKPhotoEditViewController *)photoEditViewController { [self sendEventWithName:@"PhotoEditorDidFailToGeneratePhoto" body:@{}]; } #pragma mark - RCTEventEmitter - (NSArray<NSString *> *)supportedEvents { return @[ @"PhotoEditorDidSave", @"PhotoEditorDidCancel", @"PhotoEditorDidFailToGeneratePhoto" ]; } @end
- run
react-native run-ios
- console.log NativeModules inside
App.js
to check whether there is a module called PESDK
- create an account with PhotoEditor SDK
- go to subscriptions
- go to Xcode, check the TestNative Bundle Identifier in General Part, for this one is: org.reactjs.native.example.TestNative
- paste it in the IOS BUNDLE IDS, and then save LICENSE FILE
- create an empty file in Xcode, and put it in
ios
folder, name it asLICENSE_IOS
, paste the content inside the LICENSE_FILE into this file. - open TestNative folder,
AppDelegate.m
, add the code:#import <PhotoEditorSDK/PhotoEditorSDK.h> // top [PESDK unlockWithLicenseAt:[[NSBundle mainBundle] URLForResource:@"LICENSE_IOS" withExtension:nil]]; // line before return Yes
- run
react-native run-ios
or build it via Xcode
- first we need to install react-native-fs
- then replace the App.js with the file in the repo.
- run it.
- install it via npm:
npm install react-native-fs --save
- link it:
react-native link
- Have not finished here, check this link, do as the step 1 & 2, import lib link
- set
react-native-fs
- install photoEditorSdk
- create native modules
- config License
- resolve other issues
as react-native-fs is a native module lib, so in android/build.gradle
, add
subprojects {
afterEvaluate {project ->
if (project.hasProperty("android")) {
android {
compileSdkVersion rootProject.ext.compileSdkVersion
buildToolsVersion rootProject.ext.buildToolsVersion
}
}
}
}
- in
android/build.gradle
, addmaven { url "https://artifactory.9elements.com/artifactory/imgly" }
inallprjects
part. - as
react-native-fs
andphotoEditorSDK
have some shared lib, so we need add the config packageOptions in app config.- in
android/app/build.gradle
, inandroid { }
add
packagingOptions { pickFirst 'lib/armeabi-v7a/libRSSupport.so' pickFirst 'lib/arm64-v8a/librsjni.so' pickFirst 'lib/arm64-v8a/libRSSupport.so' pickFirst 'lib/mips/libRSSupport.so' pickFirst 'lib/x86/libRSSupport.so' pickFirst 'lib/mips/librsjni.so' pickFirst 'lib/x86_64/libRSSupport.so' pickFirst 'lib/x86/librsjni.so' pickFirst 'lib/x86_64/librsjni.so' pickFirst 'lib/armeabi-v7a/librsjni.so' }
- the same file, in dependencies add:
compile 'ly.img.android:photo-editor-sdk:5.1.4'
- in
android/app/src/main/AndroidManifest.xml
, changeandroid:allowBackup
value totrue
- the same file as above, add permission configuration:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
- in
- create the folder
pesdk
under/android/app/src/main/java/com/
- add 2 file inside the folder:
PESDKModule.java
andPESDKPackage.java
, check the repo for the content of the 2 files - add PESDKconfig in Main(
android/app/src/main/java/com/testnative/MainApplication.java
):import com.pesdk.PESDKPackage;
import ly.img.android.PESDK;
- and inside
getPackages()
, add PESDK:new PESDKPackage()
The same as the ios setting part, the application_id for the application is in android/app/build.gradle
Download the License file, and create assets
folder inside android/app/src/main
, put the License file inside it.
Then in android/app/src/main/java/com/testnative/MainApplication.java
, add PESDK.init(this, 'License name')
under SoLader.init
- renderscript problem:
- solution: in
android/app/build.gradle
, defaultconfig, add:
renderscriptTargetApi 18 renderscriptSupportModeEnabled true
- solution: in