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

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 React Native application. The image editing libraries range from simple to more advanced, so even if you are new to the framework, you can always find something useful.

Updated September 2026.

Quick comparison

Here’s how the libraries in this guide compare at a glance.

Photo Manipulator

Let’s start with an image processing package that 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 0.60, as well as Expo projects that use a development build (it doesn’t run in Expo Go). Among the features it provides are Cropping and Resizing, Flipping and Rotating, File Size Optimization, Image Overlay, Text Integration and Batching of several operations at once.

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. It has had no release and no commit on its default branch since January 2025.

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://picsum.photos/600/800';

// 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 compressing it with a quality of 90, and save the result in jpeg format:
const quality = 90;

RNPhotoManipulator.optimize(image, quality).then((path) => {
  console.log(`Result image path: ${path}`);
});

// Overlay image on top of background image:
const overlay = require('./watermark.png');
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,
// reusing the cropRegion, targetSize and quality defined above:
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 },
  },
];

RNPhotoManipulator.batch(
  image,
  operations,
  cropRegion,
  targetSize,
  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 selecting images and videos from the gallery or the camera, with cropping for images, compressing, and multiple selection. 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, if your app uses the React Native New Architecture, you need version 0.50.0 or higher of Image Crop Picker. Keep in mind that cropping is meant for images: the documentation advises against setting cropping to true when selecting videos on Android, and video compression is only available on iOS.

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 lets you pick and compress videos; check the documentation for more details.

Expo Image Manipulator

If your app is built with Expo, the Expo Image Manipulator library is a natural choice. It provides an API to modify images stored on the local file system through Rotating, Flipping, Resizing and Cropping, and you can chain several of these operations before saving the result with the format and compression level you need. It works on Android, iOS, and the web, and it’s included in Expo Go, so you can try it without a custom build. For an existing React Native app, you need to install Expo in your project first.

Example

Install the library with the Expo CLI:

$ npx expo install expo-image-manipulator

Then, you can chain the operations you need inside your component:

import { useImageManipulator, SaveFormat } from 'expo-image-manipulator';

export function EditedImage({ imageUri }) {
  const context = useImageManipulator(imageUri);

  // Rotate the image, crop it, and resize the result to a width of 300:
  const editImage = async () => {
    context
      .rotate(90)
      .crop({ originX: 0, originY: 0, width: 400, height: 400 })
      .resize({ width: 300, height: null });

    const image = await context.renderAsync();
    const result = await image.saveAsync({
      format: SaveFormat.JPEG,
      compress: 0.8,
    });
    console.log(`Result image path: ${result.uri}`);
  };

  // Render your image and a button that calls editImage here
}

React Native Image Editor

The React Native Image Editor is a community library, hosted by Callstack, that was originally extracted from React Native itself. It focuses on one task, Cropping, and does it well. You can crop an image from the local file system or the web, scale the result to a new Size, set its Quality and Format, and even send Headers along with the request for a remote image. The cropped image is stored in the cache directory, so remember to delete it once you are done with it.

Example

Install the library and its pods:

$ npm install @react-native-community/image-editor
$ npx pod-install

Then, you can crop your first image:

import ImageEditor from '@react-native-community/image-editor';

// Crop a 400 x 400 area and scale it down to 200 x 200:
const cropData = {
  offset: { x: 5, y: 30 },
  size: { width: 400, height: 400 },
  displaySize: { width: 200, height: 200 },
  quality: 0.9,
};

ImageEditor.cropImage('https://picsum.photos/600/600', cropData).then(
  (result) => {
    console.log(`Cropped image uri: ${result.uri}`);
  }
);

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 original FastImage package hasn’t had a release since October 2022, so we recommend its maintained fork, published as @d11/react-native-fast-image, which uses the same API and adds support for the New React Native Architecture. If your app is built with Expo, Expo Image is another option, with disk and memory caching built in.

Example

To install the library:

$ npm i @d11/react-native-fast-image

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

import FastImage from '@d11/react-native-fast-image';

const YourImage = () => (
  <FastImage
    style={{ width: 200, height: 200 }}
    source={{
      uri: 'https://picsum.photos/400/400',
      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 serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox, and many other products. Thus, by deploying this package into your RN product, you can benefit from fantastic drawings or even UI effects like Neumorphism and Glassmorphism. It also includes Image Filters and Color Filters for adjusting how your images look. Current versions require React Native 0.79 or higher and React 19, with at least iOS 14 and Android API level 21.

Example

Don’t forget to install the library dependencies:

npm install @shopify/react-native-skia

# Alternatively, install it in an Expo project, which can also run the library in your web browser
# (see https://shopify.github.io/react-native-skia/docs/getting-started/web/ for more details):
# npx expo install @shopify/react-native-skia

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

FAQ

Which React Native library should I use to crop images? If your users pick the photo themselves, Image Crop Picker handles picking and cropping in one step. If you need to crop an image in code, React Native Image Editor crops local and remote images, and Expo Image Manipulator does the same in Expo apps.

Is react-native-fast-image still maintained? The original package hasn’t had a release since October 2022. Its maintained fork, @d11/react-native-fast-image, uses the same API and supports the New React Native Architecture. In Expo projects, Expo Image is another option with built-in disk and memory caching.

Can I use these libraries with Expo? Expo Image Manipulator is part of Expo and works in Expo Go. Photo Manipulator works with Expo development builds but not with Expo Go. React Native Skia supports direct integration with Expo, including running in the web browser.

How can I add filters to images in React Native? React Native Skia includes image filters and color filters that you can apply to your images. The older Image Filter Kit library is archived and no longer receives updates, and Native Photo Editor (react-native-photo-editor) has had no release since version 1.0.13 in February 2022.

Which libraries support the New React Native Architecture? Image Crop Picker supports it from version 0.50.0, and the FastImage fork supports both the Fabric renderer and TurboModules. Check each library’s documentation for the React Native versions it supports.

Can I ship these React Native libraries in a paid app? Yes. All six libraries in this guide are open source, and each one’s own code is MIT licensed. The @d11 FastImage fork publishes a composite (MIT AND Apache-2.0) expression because it bundles Glide on Android.

Which React Native library should I use for a full photo editor UI? These libraries give you building blocks rather than a complete editor. If you need a production-ready photo editor with a customizable UI for React Native, IMG.LY’s Photo Editor SDK covers that.