• Stars
    star
    1,102
  • Rank 40,626 (Top 0.9 %)
  • Language
    Java
  • License
    Apache License 2.0
  • Created over 5 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Native: Native Photo Editor

PRs Welcome

ReactNative: Native Photo Editor (Android/iOS)

If this project has helped you out, please support us with a star 🌟

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

πŸ“– Getting started

$ yarn add react-native-photo-editor

This library is supported React Native V61 and above

  • iOS

iOS Prerequisite: Please make sure CocoaPods is installed on your system

- Add the following to your `Podfile` -> `ios/Podfile` and run pod update:
  use_native_modules!

  pod 'RNPhotoEditor', :path => '../node_modules/react-native-photo-editor/ios'

  use_frameworks! :linkage => :static

  pod 'iOSPhotoEditor', :git => 'https://github.com/prscX/photo-editor', :branch => 'master'

  post_install do |installer|
    installer.pods_project.targets.each do |target|
      if target.name.include?('iOSPhotoEditor')
        target.build_configurations.each do |config|
          config.build_settings['SWIFT_VERSION'] = '5'
        end
      end
    end
  end

  # Follow [Flipper iOS Setup Guidelines](https://fbflipper.com/docs/getting-started/ios-native)
  # This is required because iOSPhotoEditor is implemented using Swift and we have to use use_frameworks! in Podfile
  $static_framework = ['FlipperKit', 'Flipper', 'Flipper-Folly',
    'CocoaAsyncSocket', 'ComponentKit', 'Flipper-DoubleConversion',
    'Flipper-Glog', 'Flipper-PeerTalk', 'Flipper-RSocket', 'Yoga', 'YogaKit',
    'CocoaLibEvent', 'OpenSSL-Universal', 'boost-for-react-native']
  
  pre_install do |installer|
    Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
    installer.pod_targets.each do |pod|
        if $static_framework.include?(pod.name)
          def pod.build_type;
            Pod::BuildType.static_library
          end
        end
      end
  end

  • Please make sure Flipper iOS Setup Guidelines steps are added to Podfile, since iOSPhotoEditor is implemented using Swift and we have to use use_frameworks! in Podfile

  • If using React Native Firebase v6+, please see Troubleshooting section for a known issue before moving further.

  • Add below property to your info.list

	<key>NSPhotoLibraryAddUsageDescription</key>
	<string>Application needs permission to write photos...</string>

	<!-- If you are targeting devices running on iOS 10 or later, you'll also need to add: -->
	<key>NSPhotoLibraryUsageDescription</key>
	<string>iOS 10 needs permission to write photos...</string>
  • Android

  • Please add below script in your build.gradle

buildscript {
    repositories {
        maven { url "https://jitpack.io" }
        ...
    }
}

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
        ...
    }
}
  • Add below activity in your app activities:

<activity android:name="com.ahmedadeltito.photoeditor.PhotoEditorActivity" /> <activity android:name="com.yalantis.ucrop.UCropActivity" />

  • To save image to the public external storage, you must request the WRITE_EXTERNAL_STORAGE permission in your manifest file:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

⛄️ Stickers

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

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

Refer Example project for the same.

πŸ’» Usage

import PhotoEditor from 'react-native-photo-editor'

PhotoEditor.Edit({
    path: RNFS.DocumentDirectoryPath + "/photo.jpg"
});
  • Purpose of this library is to edit photos which are within app sandbox, we recommend to move captured image to app sandbox then using RNFS share image path with library for the edit.
  • Example: If we capture image through cameraRoll then we should first move image to app sandbox using RNFS then share app storage path with the editor.

πŸ’‘ 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

πŸ”§ Troubleshooting

If using React Native Firebase v6+ or facing any of the following issues: #104, #93

  • Add the following to your podfile -> ios/podfile and run pod install
pre_install do |installer|
  installer.pod_targets.each do |pod|
    if pod.name.start_with?('RNFB')
      def pod.build_type;
        Pod::BuildType.static_library
      end
    end
  end
end
  • If the above doesn't work, try the following and and re-run pod install:

As @react-native-firebase documentation you should add following to top of the Podfile for Allow iOS Static Frameworks

$RNFirebaseAsStaticFramework = true

_swift_FORCE_LOAD$_swiftUniformTypeIdentifiers / _swift_FORCE_LOAD$_swiftCoreMIDI

✨ Credits

πŸ€” How to contribute

Have an idea? Found a bug? Please raise to ISSUES. Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.

πŸ’« Where is this library used?

If you are using this library in one of your projects, add it in this list below. ✨

πŸ“œ License

This library is provided under the Apache 2 License.

RNPhotoEditor @ prscX

πŸ’– Support my projects

I open-source almost everything I can, and I try to reply everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).

However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:

  • Starring and sharing the projects you like πŸš€

  • If you're feeling especially charitable, please follow prscX on GitHub.

    Buy Me A Coffee

    Thanks! ❀️
    prscX.github.io
    </ Pranav >

More Repositories

1

react-native-bottom-action-sheet

React Native: Native Bottom Action Sheet
JavaScript
634
star
2

react-native-app-tour

React Native: Native App Tour Library
Objective-C
621
star
3

react-native-spruce

React Native Bridge for Native Spruce Animation Library
JavaScript
532
star
4

react-native-popover-menu

React Native: Native Popover Menu
JavaScript
479
star
5

awesome-react-native-native-modules

A curated list of Awesome ReactNative: Native Modules Guidelines/Components/News/Tools/Learning Materials
437
star
6

react-native-shine-button

React Native: Native Shine Button - Effects like shining
Java
357
star
7

react-native-file-selector

React Native: Native File Selector
Java
306
star
8

react-native-tooltips

React Native: Native Tooltip View
JavaScript
267
star
9

react-native-iconic

React Native - Native Animated Icons with different states
Java
223
star
10

react-native-fluidic-slider

React Native: Native Fluidic Slider
Objective-C
196
star
11

react-native-styled-dialogs

React Native: Native Styled Dialogs
Objective-C
174
star
12

react-native-morphing-text

React Native: Native Morphing Text
Swift
160
star
13

react-native-toasty

React Native: Native Toast
JavaScript
156
star
14

react-native-siri-wave-view

React Native: Native Siri Wave View
Objective-C
145
star
15

react-native-download-button

React Native: Native Download Button: with pretty cool animation
Java
123
star
16

react-native-lock-screen

React Native: Lock Screen
JavaScript
114
star
17

react-native-selection-menu

React Native: Native Selection Menu
Java
110
star
18

react-native-voice-recorder

React Native: Native Audio Recorder View
Java
93
star
19

react-native-notification-banner

React Native: Native Notification Banner
JavaScript
90
star
20

react-native-material-shadows

React Native: Native Material Shadows
Java
86
star
21

PXSiriWave9

iOS: Siri Waveform effect similar to 9
Objective-C
64
star
22

react-native-chip-view

React Native: Material Chip View
JavaScript
43
star
23

react-native-number-selector

ReactNative: Native Number Picker
Java
39
star
24

react-native-number-stepper

ReactNative: Number Stepper
JavaScript
35
star
25

react-native-richtext

React Native: Native Rich Text Editor
Swift
31
star
26

prettier-pack

Prettier + ESLint + Husky + Lint + Flow + React + React Native
JavaScript
31
star
27

react-native-about-libraries

React Native: It offers information about install packages
JavaScript
31
star
28

react-native-easy-permissions

React Native: Native Easy Permissions
Objective-C
31
star
29

react-native-file-type

React Native: Detect the file type of a Buffer/Uint8Array by reading from Local Storage
Java
27
star
30

react-native-text-switch

ReactNative: Native Text Switch
Objective-C
26
star
31

vs-essential-plugins

Essential Prepackaged VSCode Plugins for ReactNative
JavaScript
25
star
32

react-native-bottom-sheet-text-view

React Native: Native Bottom Sheet - Text View
Objective-C
22
star
33

react-native-add-shortcuts

React Native: Native Add Shortcuts
Java
21
star
34

PXMultiSelector.iOS

iOS: Multi Selector List
20
star
35

react-native-local-authenticate

React Native: Local Authentication
Java
15
star
36

react-native-image-helper

React Native: Native Image Helper
Java
9
star
37

pod-installer

POD Installer
JavaScript
6
star
38

react-native-whats-new

React Native: Native Whats New Kit
Java
6
star
39

simplified-promise

Enhance Simplicity of JS Promise
JavaScript
4
star
40

BottomSheetTextView.iOS

Android - BottomSheet TextView
Objective-C
2
star
41

BottomSheetTextView.Android

Android - BottomSheet TextView
Java
1
star
42

prscX.github.io

prscX Profile Page
CSS
1
star