GithubHelp home page GithubHelp logo

interwebsug / photo-editor-sdk-react-native Goto Github PK

View Code? Open in Web Editor NEW
42.0 42.0 25.0 45 KB

React Native implementation of the photoeditorsdk (https://www.photoeditorsdk.com/)

License: The Unlicense

Java 43.27% JavaScript 0.37% TypeScript 0.12% Objective-C 53.29% Ruby 2.94%

photo-editor-sdk-react-native's People

Contributors

franck-nadeau avatar joschap avatar michelalbers avatar tastenjesus avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

photo-editor-sdk-react-native's Issues

imagePath

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

PhotoEditorSDK/PhotoEditorSDK-swift.h file not found

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

Issues on iOS

I've been experiencing a few issues when trying to use this library on iOS:

  • Images do not get saved to the iPhone camera roll
  • images do not seem to get saved at all unless they're edited in some way in the editor
  • After taking/choosing a photo, the React Native screen is shown for a second before the editor appears

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?

Podfile on iOS

There's no podfile in my project.
How can I follow first step that add a line to podfile?

PESDK.openCamera is undefined

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.

Simulator Screen Shot - iPhone 11 - 2020-04-22 at 06 04 22

"react-native-photoeditorsdk" PESDK.openCamera is not a function

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

Notes on Installation and a Question

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:

  • Add "#import <PhotoEditorSDK/PhotoEditorSDK.h>" to AppDelegate.m
  • Make sure to have the right license file (with the correct bundle identifiert --> App will Crash on startup) --> This might be clear but worth noting ;)
  • Set the Always Embed Swift Standard Libraries build setting in your project’s Build Settings tab to Yes.

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!

ambiguous resolution of package.json

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.

PESDK openEditor undefined

Thanks for the Great library
Since i am getting this issue in iOS.

I have successfully installed the pod as well.

Simulator Screen Shot - iPhone 6 - 2019-06-19 at 19 33 37

Could not resolve all artifacts for configuration ':classpath'. & Could not resolve ly.img.android.pesdk:plugin:6.2.7.

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.