ReactNative: Native Photo Editor (Android/iOS)

ReactNative: Native Photo Editor (Android/iOS)

react-native-photo-editor 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

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

Lifecycle hooks are not enough with React Navigation in React Native

Also use these events and API, provided by React Navigation library

Google Analytics for React Native! Compatible with react-native-ab

react-native-google-analytics .Google Analytics for React Native! Compatible with react-native-ab.

Screen navigation for React Native

React Native Easy Router .React Native Easy Router is an easy-to-use and performant screen navigation library for React Native

A useful loading indicator component for React Native

react-native-indicator .A useful indicator component for React Native 🌀A friendly loading indicator component for React Native