--- title: "Comparing the Top 5 Open Source Image Manipulation Libraries for React Native" description: "We introduce and compare the five best React Native libraries for image manipulation ranked according to their complexity. " url: "https://img.ly/blog/comparing-the-top-5-open-source-image-manipulation-libraries-for-react-native/" type: "blog" date: "2022-09-08" author: "Natalia" tags: ["Tech","Comparison","React Native","Insights"] --- > This is the markdown version of [Comparing the Top 5 Open Source Image Manipulation Libraries for React Native](https://img.ly/blog/comparing-the-top-5-open-source-image-manipulation-libraries-for-react-native/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt). --- While integrating visual content into your application, it is crucial to take into account image manipulations that can significantly enhance the quality of your product. Thus, for example, reducing the background noise in combination with cropping the image or resizing can direct the user's attention by eliminating distracting objects, while efficient caching of large images can speed up the page load. In fact, the variety of manipulation techniques is limited only by your needs and skills. In this guide, we are discussing five of the best image processing libraries that could be easily employed in your Reactive Native application. The image editing libraries are ranked according to their complexity, so even if you are new to the framework, you can always find something useful. ## **Native Photo Editor** Let’s start with one of the most comprehensive RN packages, which combines multiple features at once and provides access to a variety of fundamental techniques. By employing the Native Photo Editor API, one can immediately modify the image within the native UI through _Text_ or _Stickers Integration, Animation, Cropping_ or _Color,_ and _Object Manipulation_. Regarding prerequisites, this library needs to be installed on React Native version 61 or higher, whereas for iOS-based applications, make sure you have `CocoaPods` dependencies enabled. Overall, the Native Photo Editor can meet your needs and be handy in cases where you are required to edit photos in the application's sandbox. ### **Example** First, run the following command in order to install the library. ```bash $ npm i react-native-photo-editor ``` Afterwards, the integration of its API slightly differs for iOS and Android platforms: for **iOS,** you will need to update your `Podfile` by adding `ios/Podfile` to the script and run: ```ruby use_native_modules! pod 'RNPhotoEditor', :path => '../node_modules/react-native-photo-editor/ios' use_frameworks! :linkage => :static pod 'iOSPhotoEditor', :git => '', :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]() # 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 ``` Whereas for **Android,** make sure to add the following to your **build.gradle:** ```xml buildscript { repositories { maven { url "" } ... } } allprojects { repositories { maven { url "" } ... } } ``` Then, you can integrate this piece into your code in order to start playing with the library: ```javascript import PhotoEditor from 'react-native-photo-editor'; PhotoEditor.Edit({ path: RNFS.DocumentDirectoryPath + '/photo.jpg', }); ``` ## **Photo Manipulator** We are now moving to a more sophisticated image processing package, which opens up the possibility of programmatically modifying your visual asset. The Photo Manipulator package can be employed for projects built on React Native starting from version 60. Among the features it provides are _Cropping_ and _Resizing_, _Quality Optimization, Image Overlay, Text Integration_ and _Batching_ of all features simultaneously. This library can save you time when integrating image manipulation into your application due to its easy usage and powerful batch application of all features. The typical use case could be a photo editor like Instagram. ### Example Start your exciting adventure with Photo Manipulator by running in your terminal: ```bash $ npm i react-native-photo-manipulator ``` Then, you can directly import its API to your code: ```javascript import RNPhotoManipulator from 'react-native-photo-manipulator'; const image = ''; // Crop and resize the image to 200 x 150: const cropRegion = { x: 5, y: 30, height: 400, width: 250 }; const targetSize = { height: 200, width: 150 }; RNPhotoManipulator.crop(image, cropRegion, targetSize).then((path) => { console.log(`Result image path: ${path}`); }); // Optimize your image by enhancing its quality to 90, and save the result in jpeg format: const quality = 90; RNPhotoManipulator.optimize(image, 90).then((path) => { console.log(`Result image path: ${path}`); }); // Overlay image on top of background image: const overlay = ''; const position = { x: 5, y: 20 }; RNPhotoManipulator.overlayImage(image, overlay, position).then((path) => { console.log(`Result image path: ${path}`); }); // Add text to your image: const texts = [ { position: { x: 50, y: 30 }, text: 'Text 1', textSize: 30, color: '#000000', }, { position: { x: 50, y: 30 }, text: 'Text 1', textSize: 30, color: '#FFFFFF', thickness: 3, }, ]; RNPhotoManipulator.printText(image, texts).then((path) => { console.log(`Result image path: ${path}`); }); // Crop, resize and do operations (overlay and printText) on image: const cropRegion = { x: 5, y: 30, height: 400, width: 250 }; const targetSize = { height: 200, width: 150 }; const operations = [ { operation: 'text', options: { position: { x: 50, y: 30 }, text: 'Text 1', textSize: 30, color: '#000000', }, }, { operation: 'overlay', overlay: '', position: { x: 5, y: 20 }, }, ]; const quality = 90; RNPhotoManipulator.batch( image, cropRegion, targetSize, operations, quality ).then((path) => { console.log(`Result image path: ${path}`); }); ``` ## **Image Crop Picker** Image Crop Picker is another example of a powerful open-source library for iOS and Android applications. It’s designed specifically for modifying the _camera_\-based static assets and dynamic _videos_ through _cropping_, _compressing,_ and _multiplication_. Thus, the advantage that distinguishes this package from similar ones is its ability to crop and compress images, which is extremely important when creating an image editing app, since large files can cause issues with performance. Moreover, it’s recommended to use version 0.25 and higher for the React Native based on v.60 (and above); for older versions, you need to apply older versions of the Image Crop Picker library. ### Example Let’s begin with the installation of the library: ```bash $ npm i react-native-image-crop-picker ``` Once the system is set up, you can import the Image Crop Picker API with the following: ```javascript import ImagePicker from 'react-native-image-crop-picker'; // Crop a single image to a size 300 x 400: ImagePicker.openPicker({ width: 300, height: 400, cropping: true, }).then((image) => { console.log(image); }); // Crop several images with one command: ImagePicker.openPicker({ multiple: true, }).then((images) => { console.log(images); }); // Select image from camera and crop it to a size 300 x 400: ImagePicker.openCamera({ width: 300, height: 400, cropping: true, }).then((image) => { console.log(image); }); //This library also supports manipulations with video; check the documentation for more details. ``` ## **Image Filter Kit** The following library could be an ideal manipulation tool for a photo editing application. Image Filter Kit library differs significantly from previous packages by the number of filters it supports. Thus, an asset can be modified in terms of its _color/convolve matrix_ or _composition_, whereas the distracting objects could be _blended, blurred,_ or _extracted_. Moreover, Android-only or iOS-only filters could also be implemented depending on the system you are working with. The Image Filter Kit can be employed for the Reactive Native systems of version 64 and higher (note that in this case, it also limits Android to min v.21 and iOS min v.9). For the projects based on the RN from 57.1 (and up to v.64), the min Android version should be set to 17 and for iOS to v.9. ### Example Start by once again installing the API of this library to your device: ```bash $ npm i react-native-image-filter-kit ``` The set of features supported by the library is vast, so here we give just a brief example from which you could start working with Image Filter Kit: ```jsx // Import the library import { SoftLightBlend, // Blend filter Emboss, // Convolve matrix filter Earlybird, // CSSGram filter Invert, RadialGradient, } from 'react-native-image-filter-kit'; const result = ( } /> } srcTransform={{ anchor: { x: 0.5, y: 1 }, translate: { x: 0.5, y: 1 }, }} srcImage={ } /> } /> } /> ); ``` ## **[FastImage](https://github.com/DylanVann/react-native-fast-image)** Once you have finished modifying images, you could think about their final presentation on your users' devices and the memory problems that can occur when large resources are incorrectly cached. The FastImage library is designed to handle such challenges and correctly process _image caching_ information in order to avoid flickering, cache misses and low performance. Among other things the package is capable of are the support of _GIF assets, Border radius, Preload images,_ and _Headers Authorization_. The only disadvantage of this package is the low support for the older versions of React Native (such as below v.60). ### Example To install the library: ```bash $ npm i react-native-fast-image ``` Then, we are going to import the library and set up some main settings: ```jsx import FastImage from 'react-native-fast-image'; const YourImage = () => ( ', headers: { Authorization: 'someAuthToken' }, // Add authorization headers; priority: FastImage.priority.normal, // Adjust the priority of images; }} resizeMode={FastImage.resizeMode.contain} /> ); ``` ## **[React Native Skia](https://shopify.github.io/react-native-skia/)** In the end, we have a bonus library with extremely powerful 2D graphic capabilities. **_React Native Skia_** originates from the open-source Skia Graphics Library, which powers the graphics engine of Google Chrome, Chrome OS, Firefox OS Android, Flutter and many other platforms. Thus, by deploying this package into your RN product, you can benefit from fantastic drawings or even UI effects like _Neumorphism_ and _Glassmorphism_. ### Example Don’t forget to install the library dependencies: ```bash npm install @shopify/react-native-skia //Alternatively, you can opt for running the library in your web browser with the expo (See [here]() for more details): //expo install @shopify/react-native-skia // Don't forget to uncomment this line ``` Once everything is set up, you can turn on the Skia engine with the following declarative API: ```jsx import { Canvas, Circle, Group } from '@shopify/react-native-skia'; export const HelloWorld = () => { const size = 256; const r = size * 0.33; return ( ); }; ``` ## **CONCLUSION** Thus, the best React Native image processing libraries vary in terms of their functionality, from simple ones providing limited image manipulation capabilities to more advanced libraries capable of modifying the image and how it works in your user interface system. If you are looking for a production-grade photo editor with all the above features and a customizable professional UI have a look at our **[PhotoEditor SDK](https://img.ly/products/photo-sdk.md)**. If you want to go beyond simple image editing and your project requires support for templates, creative automation, or more complex designs, you should check out the **[CreativeEditor SDK](https://img.ly/products/creative-sdk.md)**. --- ## More Resources - **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design - **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation - **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.