Image Handling Architecture in React Native: Picker, Resizer, and Viewer

Building a feature that involves images in React Native usually requires three steps: getting the image, optimizing it, and showing it. The packages react-native-image-crop-picker, react-native-image-resizer, and react-native-image-zoom-viewer each handle one of these steps. While they often work together, understanding their individual architectures helps you decide when to use them — or when to find alternatives.

🔗 Installation and Native Dependencies

Integration complexity varies because some packages rely on native code while others are pure JavaScript.

react-native-image-crop-picker requires native modules for both iOS and Android. You must link native libraries and update configuration files.

// react-native-image-crop-picker: iOS Pod install
cd ios && pod install

// android/app/build.gradle
apply from: "../../node_modules/react-native-image-crop-picker/android/build.gradle"

react-native-image-resizer also relies on native code for image processing. It requires linking native modules to access device storage and image codecs.

// react-native-image-resizer: React Native 0.60+ autolinking
cd ios && pod install

// Android may require manual linking in older versions
react-native link react-native-image-resizer

react-native-image-zoom-viewer is primarily JavaScript-based. It builds on top of React Native's ScrollView and Animated APIs, so it needs no native linking.

// react-native-image-zoom-viewer: Pure JS installation
npm install react-native-image-zoom-viewer
// No pod install or native linking required

🛠️ Core API Usage Patterns

Each package exposes a different interface style based on its job. Pickers and resizers use imperative promises, while viewers use declarative components.

react-native-image-crop-picker uses static methods to open native UI. It returns a Promise with image data.

// react-native-image-crop-picker: Imperative API
import ImagePicker from 'react-native-image-crop-picker';

const image = await ImagePicker.openPicker({
  width: 300,
  height: 300,
  cropping: true
});
console.log(image.path);

react-native-image-resizer uses a static method to process a file path. It returns a Promise with the new file location.

// react-native-image-resizer: Imperative API
import ImageResizer from 'react-native-image-resizer';

const resized = await ImageResizer.createResizedImage(
  image.path, 1000, 1000, 'JPEG', 80
);
console.log(resized.uri);

react-native-image-zoom-viewer uses a React component that wraps your content. It controls display via props.

// react-native-image-zoom-viewer: Declarative API
import ImageViewer from 'react-native-image-zoom-viewer';

<ImageViewer 
  imageUrls={[{ url: image.uri }]} 
  onCancel={() => setVisible(false)} 
/>

⚠️ Maintenance and Stability

Long-term support is critical for native modules. Breaking changes in React Native can break native libraries.

react-native-image-crop-picker is widely adopted and generally keeps pace with React Native updates. It has a large user base reporting issues quickly.

// react-native-image-crop-picker: Active community support
// Check GitHub issues for RN version compatibility before upgrading

react-native-image-resizer has shown signs of slower maintenance in recent years. Many teams now evaluate forks or alternatives like react-native-image-manipulator for better long-term safety.

// react-native-image-resizer: Verify active maintenance
// Consider testing react-native-image-manipulator as a backup plan

react-native-image-zoom-viewer is stable because it avoids native code. It is less likely to break during React Native upgrades.

// react-native-image-zoom-viewer: Low risk during upgrades
// Pure JS means fewer breaking changes between RN versions

🔄 Error Handling and Async Flow

All three packages handle asynchronous operations, but they report errors differently.

react-native-image-crop-picker rejects the Promise if the user cancels or an error occurs. You must wrap calls in try/catch blocks.

// react-native-image-crop-picker: Promise rejection
try {
  const image = await ImagePicker.openPicker({});
} catch (e) {
  // Handle cancel or error
}

react-native-image-resizer also returns a Promise. It rejects if the file path is invalid or processing fails.

// react-native-image-resizer: Promise rejection
try {
  const resized = await ImageResizer.createResizedImage(...);
} catch (e) {
  // Handle processing failure
}

react-native-image-zoom-viewer uses callbacks for events like cancel or fail. It does not use Promises for interaction.

// react-native-image-zoom-viewer: Callback props
<ImageViewer 
  onCancel={() => console.log('Closed')} 
  onFail={() => console.log('Load failed')} 
/>

🌱 Similarities: Shared Ground Between Packages

Despite their different roles, these libraries share common patterns typical of the React Native ecosystem.

1. 📱 Mobile-First Design

• All three are built specifically for iOS and Android touch interfaces.
• They handle gesture interactions native to mobile devices.

// All packages support touch interactions
// Picker: Touch to select
// Resizer: Background process
// Viewer: Pinch to zoom

2. 📦 Async Operations

• All three handle heavy operations without blocking the UI thread.
• Pickers and Resizers use Promises; Viewer uses async loading.

// Picker and Resizer
await someAsyncFunction();

// Viewer
<Image source={{ uri }} /> // Loads asynchronously

3. 🔒 Permission Management

• Pickers and Resizers require camera and storage permissions.
• Viewer requires network permissions if loading URLs.

// iOS: Info.plist
// Android: AndroidManifest.xml
// Required for Picker and Resizer to access files

4. 🎨 Customization Limits

• All three offer limited UI customization compared to building from scratch.
• You trade control for speed of implementation.

// Picker: Limited crop UI colors
// Resizer: No UI
// Viewer: Limited toolbar customization

5. 🤝 Community Ecosystem

• All three rely on open-source contributions for bug fixes.
• They are often used together in production apps.

// Common stack
import Picker from 'react-native-image-crop-picker';
import Resizer from 'react-native-image-resizer';
import Viewer from 'react-native-image-zoom-viewer';

📊 Summary: Key Similarities

🆚 Summary: Key Differences

💡 The Big Picture

react-native-image-crop-picker is the go-to solution for intake. Use it when you need users to pick or capture images with minimal effort. It handles the hard parts of native camera and gallery integration.

react-native-image-resizer solves the bandwidth problem. Use it when you need to shrink images before upload. However, keep an eye on maintenance — have a backup plan ready if updates lag behind React Native versions.

react-native-image-zoom-viewer completes the loop. Use it when users need to see the full image. Since it is pure JavaScript, it is the safest bet for long-term stability during framework upgrades.

Final Thought: These tools are often complementary. A robust image feature might use the picker to get the file, the resizer to optimize it, and the viewer to display it later. Choose based on which part of the pipeline you need to build — and always check maintenance status before committing to native modules.