interwebsug / photo-editor-sdk-react-native Goto Github PK
View Code? Open in Web Editor NEWReact Native implementation of the photoeditorsdk (https://www.photoeditorsdk.com/)
License: The Unlicense
React Native implementation of the photoeditorsdk (https://www.photoeditorsdk.com/)
License: The Unlicense
For a commercial app
Hi,
I am trying to use the photo-editor-sdk-react-native and has acquired the trial license. I use it in android, it work fine with all the filter etc, but the problem is the return imagePath is not working, here is my code as below
PESDK.openEditor(response.path, [
PESDK.transformTool,
PESDK.filterTool,
PESDK.focusTool,
PESDK.adjustTool,
PESDK.textTool,
PESDK.stickerTool,
PESDK.overlayTool,
PESDK.brushTool
], {
[PESDK.backgroundColorCameraKey]: '#000',
[PESDK.backgroundColorEditorKey]: '#000',
[PESDK.backgroundColorMenuEditorKey]: '#000',
[PESDK.cameraRollAllowedKey]: false,
[PESDK.showFiltersInCameraKey]: true,
})
.then((imagePath) => {this.setState({ iPath : imagePath })})
.catch((err) => alert(err));
the this.state.iPath always null as when i first define.
Any advice on this ? thanks a lot
Successfully installed. Linked. Then ran into this problem at build.
Any idea why?
Problem pointing at following lines:
#import <PhotoEditorSDK/PhotoEditorSDK-swift.h>
Problem log:
"PhotoEditorSDK/PhotoEditorSDK-swift.h" not found
photo-editor-sdk-react-native v1.1.1
React v0.11.0
PhotoEditorSDK 8.2.4
AVHexcOLOR 3.0.0
Pod 1.4.0
React-Naitve 0.47.0
XCode 9.2
I've been experiencing a few issues when trying to use this library on iOS:
I'm not sure if anyone else is having these problems or if it has to do with the fact that I'm using React Native Navigation v1 in my app. I saw in the other open issue that a contributor is working on updating this library soon. Will fixes for these issues be included?
There's no podfile in my project.
How can I follow first step that add a line to podfile?
package.json
{
"name": "AppName",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-community/cameraroll": "^1.4.1",
"@react-native-community/google-signin": "^4.0.0",
"@react-native-community/masked-view": "^0.1.6",
"@react-native-firebase/app": "^6.4.0",
"@react-native-firebase/auth": "^6.4.0",
"@react-native-firebase/firestore": "^6.4.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"ramda": "^0.27.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-actionsheet": "^2.4.2",
"react-native-camera": "^3.23.1",
"react-native-fbsdk": "^1.1.2",
"react-native-gesture-handler": "^1.5.6",
"react-native-image-crop-picker": "^0.28.0",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-modal": "^11.5.3",
"react-native-modalbox": "^2.0.0",
"react-native-photoeditorsdk": "^2.4.1",
"react-native-reanimated": "^1.7.0",
"react-native-root-toast": "^3.2.0",
"react-native-safe-area-context": "^0.6.4",
"react-native-safe-area-view": "^1.0.0",
"react-native-screens": "^2.0.0-beta.1",
"react-native-size-matters": "^0.3.0",
"react-native-snap-carousel": "^3.8.4",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "4.0.10",
"react-navigation-redux-helpers": "^4.0.1",
"react-navigation-stack": "^2.1.0",
"react-redux": "6.0.1",
"redux": "^4.0.4",
"redux-persist": "5.10.0",
"redux-saga": "^1.1.3",
"redux-saga-routines": "^3.2.2",
"reduxsauce": "^1.1.2"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/runtime": "^7.6.2",
"@react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"jetifier": "^1.6.5",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0",
"reactotron-react-native": "2.2.0",
"reactotron-redux": "2.1.3",
"reactotron-redux-saga": "3.0.0",
"seamless-immutable": "^7.1.4"
},
"jest": {
"preset": "react-native"
}
}
I have reviewed the code of the PESEK module.
PESEK module file
import { Component } from 'react';
import { Configuration } from './configuration';
declare class PESDK {
/**
* Modally present a photo editor.
* @note EXIF meta data is only preserved in the edited image if and only if the source
* image is loaded from a local `file://` resource.
*
* @param {string | {uri: string} | number} image The source of the image to be edited.
* Can be either an URI (local, remote, data resource, or any other registered scheme for the
* React Native image loader), an object with a member `uri`, or an asset reference which can
* be optained by, e.g., `require('./image.png')` as `number`. If this parameter is `null`,
* the `serialization` parameter must not be `null` and it must contain an embedded source image.
* @param {Configuration} configuration The configuration used to initialize the editor.
* @param {object} serialization The serialization used to initialize the editor. This
* restores a previous state of the editor by re-applying all modifications to the loaded
* image.
*
* @return {Promise<{image: string, hasChanges: boolean, serialization: object}>} Returns the
* edited `image`, an indicator (`hasChanges`) whether the input image was modified at all, and
* all modifications (`serialization`) applied to the input image if `export.serialization.enabled`
* of the `configuration` was set. If the editor is dismissed without exporting the edited image
* `null` is returned instead.
*/
static openEditor(
image: string | {uri: string} | number,
configuration: Configuration,
serialization: object
): Promise<{image: string, hasChanges: boolean, serialization: object}>
/**
* Unlock PhotoEditor SDK with a license.
*
* @param {string | object} license The license used to unlock the SDK. Can be either an URI
* pointing to a local `file://` resource that contains the license, the license as a string,
* or the license as an object which can be optained by, e.g., `require('./pesdk_license')`
* where the required license files must be named `./pesdk_license.ios.json` for the iOS license
* and `./pesdk_license.android.json` for the Android license file in order to get automatically
* resolved by the packager.
*/
static unlockWithLicense(
license: string | object
): void
/**
* Creates a configuration object populated with default values for all options.
* @return {Configuration} The default configuration.
*/
static createDefaultConfiguration(
): Configuration
}
/**
* Props for the `PhotoEditorModal` component.
*/
interface PhotoEditorModalProps {
/**
* This prop determines whether your modal is visible.
*/
visible: boolean;
/**
* This prop determines the source of the image to be edited.
* Can be either an URI (local, remote, data resource, or any other registered scheme for the
* React Native image loader), an object with a member `uri`, or an asset reference which can
* be optained by, e.g., `require('./image.png')` as `number`.
*
* If this prop is `null`, the `serialization` prop must not be `null` and it must contain an
* embedded source image.
*
* @note EXIF meta data is only preserved in the edited image if and only if the source
* image is loaded from a local `file://` resource.
*/
image?: string | {uri: string} | number;
/**
* This prop determines the configuration used to initialize the editor.
*/
configuration?: Configuration;
/**
* This prop determines the serialization used to initialize the editor. This
* restores a previous state of the editor by re-applying all modifications to the loaded
* image.
*/
serialization?: object;
/**
* This prop determines the callback function that will be called when the user exported an image.
*
* The object passed to this callback includes the edited `image`, an indicator (`hasChanges`) whether
* the input image was modified at all, and all modifications (`serialization`) applied to the input image
* if `export.serialization.enabled` of the `configuration` prop was set.
*/
onExport: ({image: string, hasChanges: boolean, serialization: object}) => void;
/**
* This prop determines the callback function that will be called when the user dissmisses the editor without
* exporting an image.
*/
onCancel?: () => void;
/**
* This prop determines the callback function that will be called when an error occurs.
*/
onError?: (error: Error) => void;
}
/**
* State for the `PhotoEditorModal` component.
*/
interface PhotoEditorModalState {
/**
* This state determines whether the modal is visible.
*/
visible: boolean;
}
/**
* A component that wraps the `PESDK.openEditor` function to modally present a photo editor.
*/
declare class PhotoEditorModal extends Component<PhotoEditorModalProps, PhotoEditorModalState> {}
export { PESDK, PhotoEditorModal };
export * from './configuration';
Issue
According to the documentation which is on this link
https://github.com/interwebsug/photo-editor-sdk-react-native
PESDK.openCamera
method exists
But you can see inside the module this method does not exist.
I use react-native-photoeditorsdk in project RN.
I can use funtion openEditor but can't use funtion openCamera.
Error TypeError: _$$_REQUIRE(dependencyMap[5], "react-native-photoeditorsdk").PESDK.openCamera is not a function. (In '$$_REQUIRE(dependencyMap[5], "react-native-photoeditorsdk").PESDK.openCamera(configuration)', '$$_REQUIRE(_dependencyMap[5], "react-native-photoeditorsdk").PESDK.openCamera' is undefined)
How to fix it? Pls
Hi,
Thanks for your work! I installed the PhotoEditorSDK together with this module today and had to work around some caveats which might be good to add to the step-by-step guide in the readme:
Additionally to the steps in the readme, I had to:
After that I was able to call "openEditor" and open the PESDK within my App – However: The Photoeditor displays a "Loading image"-Screen that never disappears and the image won't be displayed.
I'm passing a "file:///..."-Url to PESDK that was selected from the camera roll. I noticed this in your docs:
«Note for iOS users: Since Apple is a bit restrictive on file system access you may have to fiddle with RNFetchBlob (https://github.com/wkh237/react-native-fetch-blob) to directly open the editor with an image filepath.»
Do I need to first fetch the file into local storage (using react-native-fetch-blob or react-native-fs) so that the image is accessible to PESDK? Or is this not related? Any experiences or similar issues?
Thank you!
When I install this and launch the app, my bundler says:
error: bundling failed: ambiguous resolution: module `/Users/taichi/dev/rn_image_editor_sample/index.js` tries to require `react-native`, but there are several files providing this module. You can delete or fix them:
* `/Users/taichi/dev/rn_image_editor_sample/ios/Pods/React/package.json`
* `/Users/taichi/dev/rn_image_editor_sample/node_modules/react-native/package.json`
By the way, is this repo maintained well to be able to use in production?
I read this post: https://blog.photoeditorsdk.com/photoeditor-sdk-react-native-15179c589a55 ,
and in this post you set up the SDK with Swift code, not using this repo.
Your docs do not refer to this repo; https://docs.photoeditorsdk.com/quickstarts/react_native
If it's better not to use this repo and to use NativeModules
, I will do so.
whenever I install this and go through your guide I get an error about your react native camera. I'm also using your react native camera? any idea?
App doesn't start. I have a trial license file.
Every time I try to run the app this error occurs: TypeError: null is not an object (evaluating 'RNPhotoEditorSDK.unlockWithLicense')
React native: 0.63.2
Platform: Android
PESDK: 2.5.0
Required by:
project :
> Could not resolve ly.img.android.pesdk:plugin:6.2.7.
> Could not get resource 'https://artifactory.9elements.com/artifactory/imgly/ly/img/android/pesdk/plugin/6.2.7/plugin-6.2.7.pom'.
> Could not GET 'https://artifactory.9elements.com/artifactory/imgly/ly/img/android/pesdk/plugin/6.2.7/plugin-6.2.7.pom'.
> sun.security.validator.ValidatorException: PKIX path validation failed: java.security.cert.CertPathValidatorException: validity check failed
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.