Image Handling in React Native: Crop Picker vs Marker vs Resizer

When building mobile apps with React Native, you often need to handle images — whether it’s letting users select and crop photos, adding watermarks or text overlays, or resizing large images for performance. The three packages react-native-image-crop-picker, react-native-image-marker, and react-native-image-resizer each solve distinct but sometimes overlapping problems in this space. Let’s break down what they do, how they differ, and when to use which.

📸 Core Purpose: What Each Package Actually Does

react-native-image-crop-picker is a user-facing image picker with built-in cropping and compression. It lets users choose photos from their gallery or take new ones with the camera, then optionally crop, rotate, or compress them before returning the result.

// Example: Open image picker with cropping
import ImagePicker from 'react-native-image-crop-picker';

const image = await ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: true,
  compressImageQuality: 0.8
});
// Returns { path, width, height, mime, size }

react-native-image-marker focuses on adding overlays to existing images — like text, watermarks, or custom drawings — and saving the modified image. It does not handle image selection or user interaction.

// Example: Add text watermark to an image
import ImageMarker from 'react-native-image-marker';

const markedImage = await ImageMarker.markText({
  src: '/path/to/image.jpg',
  text: '© My App',
  X: 20,
  Y: 20,
  color: '#ffffff',
  fontSize: 16
});
// Returns path to new image file

react-native-image-resizer is purely about resizing and compressing existing images to reduce file size or fit specific dimensions. It doesn’t provide UI or overlay capabilities.

// Example: Resize image to max width/height
import ImageResizer from 'react-native-image-resizer';

const resizedImage = await ImageResizer.createResizedImage(
  '/path/to/image.jpg',
  400,    // maxWidth
  400,    // maxHeight
  'JPEG', // format
  80      // quality (0–100)
);
// Returns { uri, width, height, name, size }

🎯 User Interaction vs. Background Processing

This is the biggest architectural distinction.

• react-native-image-crop-picker is the only one that opens native UI (camera or photo library). It’s meant for direct user interaction.
• react-native-image-marker and react-native-image-resizer operate silently on existing image paths. They assume you already have an image URI (e.g., from a picker, download, or cache).

💡 If your app needs users to select images, you’ll likely start with react-native-image-crop-picker. Then, if you need to add a watermark or further resize, you’d pass its output to one of the other two.

🔧 Feature Comparison: Cropping, Marking, and Resizing

Cropping Support

Only react-native-image-crop-picker supports interactive cropping:

// react-native-image-crop-picker
const cropped = await ImagePicker.openCropper({
  path: '/existing/image.jpg',
  width: 200,
  height: 200
});

Neither react-native-image-marker nor react-native-image-resizer can crop images. They only resize proportionally or to fit bounds.

Adding Overlays (Text/Watermarks)

Only react-native-image-marker supports this:

// react-native-image-marker
await ImageMarker.markText({
  src: imageUri,
  text: 'CONFIDENTIAL',
  X: 50,
  Y: 100,
  fontName: 'Arial-BoldMT',
  fontSize: 24
});

The other two packages have no overlay capabilities whatsoever.

Resizing and Compression

All three can resize and compress, but with different trade-offs:

• react-native-image-crop-picker: Resizing/compression happens during selection. You can’t reprocess an existing image without re-picking.

  // Only during openPicker/openCamera
  await ImagePicker.openPicker({
    width: 500,
    height: 500,
    compressImageMaxWidth: 1000,
    compressImageQuality: 0.7
  });
  

• react-native-image-resizer: Built specifically for this. Offers fine control over output format (JPEG, PNG, WEBP) and quality.

  const resized = await ImageResizer.createResizedImage(
    uri, 800, 600, 'PNG', 90
  );
  

• react-native-image-marker: Can resize while marking, but it’s not its primary purpose. Less control over output format.

  // Scaling during markText
  await ImageMarker.markText({
    src: uri,
    scale: 0.5, // optional resize factor
    // ... other options
  });
  

⚙️ Platform-Specific Considerations

All three require native modules and must be linked (or auto-linked via CocoaPods/Gradle). However:

• react-native-image-crop-picker has the most complex native setup due to camera/gallery permissions and UI components. On iOS, you must add usage descriptions in Info.plist.
• react-native-image-resizer and react-native-image-marker are simpler — they only process files, so no runtime permissions beyond storage access.

Also note: react-native-image-marker uses native drawing APIs (Canvas on Android, Core Graphics on iOS), so text rendering may look slightly different across platforms.

🔄 Typical Workflow Integration

In real apps, these tools are often chained together:

1. Use react-native-image-crop-picker to let the user select and crop a profile picture.
2. Pass the resulting image to react-native-image-resizer to ensure it’s under 1MB for upload.
3. Optionally, use react-native-image-marker to add a timestamp or logo before saving.

// Combined example
const picked = await ImagePicker.openPicker({
  cropping: true,
  width: 400,
  height: 400
});

const resized = await ImageResizer.createResizedImage(
  picked.path, 400, 400, 'JPEG', 80
);

const watermarked = await ImageMarker.markText({
  src: resized.uri,
  text: 'Uploaded via MyApp',
  X: 10,
  Y: resized.height - 30
});

🛑 Maintenance and Compatibility Notes

As of mid-2024:

• react-native-image-crop-picker is actively maintained and compatible with React Native 0.72+.
• react-native-image-resizer is also actively maintained, with recent updates for modern React Native versions.
• react-native-image-marker appears less actively updated, but still functions correctly on current React Native versions. No official deprecation notice exists, but verify compatibility with your target platform versions.

None of these packages are deprecated, but always test on your target iOS and Android versions.

📊 When to Use Which?

💡 Final Recommendation

Don’t think of these as competitors — they’re complementary tools for different stages of image handling:

• Start with react-native-image-crop-picker if you need user input.
• Reach for react-native-image-resizer when you need reliable, format-aware resizing.
• Use react-native-image-marker only when you must embed visible metadata (text, logos) into images.

Trying to force one package to do another’s job leads to awkward workarounds. Instead, combine them where needed — the performance cost of multiple processing steps is usually acceptable for user-facing image workflows.