Morioh
Login
React Native Dev

React Native Dev

4 years ago

ReactNative: Native Photo Editor (Android/iOS)

react-native-photo-editor ReactNative: Native Photo Editor (Android/iOS)

This library is a React Native bridge around native photo editor libraries. It allows you to edit any photo by providing below set of features:

  • Cropping
  • Adding Images -Stickers-
  • Adding Text with Colors
  • Drawing with Colors
  • Scaling and Rotating Objects
  • Deleting Objects
  • Saving to Photos and Sharing
  • Cool Animations

Native-Photo-Editor

Getting started

$ npm install react-native-photo-editor --save

$ 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" />

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 verify node_modules/react-native-photo-editor/ios/ contains Pods folder. If does not exist please execute pod install command on node_modules/react-native-photo-editor/ios/, if any error => try pod repo update then pod 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’s Embedded 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
	<key>NSPhotoLibraryAddUsageDescription</key>
	<string>Application needs permission to write photos...</string>
  • Now build your iOS app through Xcode

Usage

import { RNPhotoEditor } from 'react-native-photo-editor'

RNPhotoEditor.Edit({
    path: RNFS.DocumentDirectoryPath + "/photo.jpg"
});

Props

  • General(iOS & Android)
Prop Type Default Note
path: mandatory string Specify image path you want to edit
hiddenControls array Specify editor controls you want to hide [clear, crop, draw, save, share, sticker, text]
stickers array Specify stickers you want to show in stickers picker
colors array: HEX-COLOR [#000000, #808080, #a9a9a9, #FFFFFF, #0000ff, #00ff00, #ff0000, #ffff00, #ffa500, #800080, #00ffff, #a52a2a, #ff00ff] Specify colors you want to show for draw/text
onDone func Specify done callback
onCancel func Specify cancel callback

Stickers

If you want to add custom stickers, please add them to your native project:

  • iOS: Add stickers to iOS Resources folder
  • Android: Add stickers to app drawable folder

Download Details:

Author: prscX

GitHub: https://github.com/prscX/react-native-photo-editor

#react-native #reactjs #programming

ReactNative: Native Photo Editor (Android/iOS)
178.90 GEEK