Comparing the Top 5 Open Source Image Manipulation Libraries for React Native

Natalia — Thu, 08 Sep 2022 06:56:00 GMT

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.

$ 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:

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

Whereas for Android, make sure to add the following to your build.gradle:

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

Then, you can integrate this piece into your code in order to start playing with the library:

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:

$ npm i react-native-photo-manipulator

Then, you can directly import its API to your code:

import RNPhotoManipulator from 'react-native-photo-manipulator';

const image = '<https://unsplash.com/photos/qw6qQQyYQpo/download?force=true>';

// 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 = '<https://www.iconfinder.com/icons/1174949/download/png/128>';
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: '<https://www.iconfinder.com/icons/1174949/download/png/128>',
    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:

$ npm i react-native-image-crop-picker

Once the system is set up, you can import the Image Crop Picker API with the following:

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:

$ 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:

// Import the library
import {
  SoftLightBlend, // Blend filter
  Emboss, // Convolve matrix filter
  Earlybird, // CSSGram filter
  Invert,
  RadialGradient,
} from 'react-native-image-filter-kit';

const result = (
  <Earlybird
    image={
      <SoftLightBlend
        resizeCanvasTo={'dstImage'}
        dstTransform={{ scale: 'CONTAIN' }}
        dstImage={
          <Emboss // Emboss an image to create a realistic outline effect
            image={
              <Image
                style={{ width: 320, height: 320 }}
                source={require('./parrot.png')}
                resizeMode={'contain'}
              />
            }
          />
        }
        srcTransform={{
          anchor: { x: 0.5, y: 1 },
          translate: { x: 0.5, y: 1 },
        }}
        srcImage={
          <Invert // Invert and Adjust Radial Gradient of the image to red
            image={
              <RadialGradient
                colors={['rgba(0, 0, 255, 1)', '#00ff00', 'red']}
                stops={[0.25, 0.75, 1]}
                center={{ x: '50w', y: '100h' }}
              />
            }
          />
        }
      />
    }
  />
);

FastImage

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:

$ npm i react-native-fast-image

Then, we are going to import the library and set up some main settings:

import FastImage from 'react-native-fast-image';

const YourImage = () => (
  <FastImage
    style={{ width: 200, height: 200 }}
    source={{
      uri: '<https://unsplash.it/400/400?image=1>',
      headers: { Authorization: 'someAuthToken' }, // Add authorization headers;
      priority: FastImage.priority.normal, // Adjust the priority of images;
    }}
    resizeMode={FastImage.resizeMode.contain}
  />
);

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:

npm install @shopify/react-native-skia

//Alternatively, you can opt for running the library in your web browser with the expo (See [here](<https://shopify.github.io/react-native-skia/docs/getting-started/web/>) 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:

import { Canvas, Circle, Group } from '@shopify/react-native-skia';
export const HelloWorld = () => {
  const size = 256;
  const r = size * 0.33;
  return (
    <Canvas style={{ flex: 1 }}>
      <Group blendMode="multiply">
        <Circle cx={r} cy={r} r={r} color="cyan" />
        <Circle cx={size - r} cy={r} r={r} color="magenta" />
        <Circle cx={size / 2} cy={size - r} r={r} color="yellow" />
      </Group>
    </Canvas>
  );
};

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. 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.

Comparison – IMG.LY Blog

Comparing the Top 5 Open Source Image Manipulation Libraries for React Native

Native Photo Editor

Example

Photo Manipulator

Example

Image Crop Picker

Example

Image Filter Kit

Example

FastImage

Example

React Native Skia

Example

CONCLUSION