🚀 React Native: Fully Customizable Image Crop Picker (Android + iOS)

Source: Dev.to

---

The problem

While building a feature recently, I hit a limitation. I needed:

• 🎨 Fully customizable header & footer
• 🔵 Circular crop (for profile images)
• ✂️ Free‑style cropping
• 📦 Base64 + file output
• 🌙 Theme control
• 📱 Consistent behavior on Android & iOS

Most crop libraries either:

• Don’t allow UI customization
• Lock you into a native toolbar
• Or don’t give proper Base64 support

So I built react-native-customizable-image-crop-picker.

---

✨ Why another crop library?

Typical problems I faced:

• ❌ No custom header design
• ❌ No footer button layout control
• ❌ Hard to match app branding
• ❌ Limited icon customization
• ❌ Poor theme control

I wanted something production‑ready with deep customization — so I created this package.

---

Demo

Android screenshot

iOS screenshots

---

📦 Installation

yarn add react-native-customizable-image-crop-picker

iOS

cd ios && pod install

---

🛠 Complete working example

import React, { useState } from 'react';
import {
  Image,
  Pressable,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { openImageCropPicker } from 'react-native-customizable-image-crop-picker';

const App = () => {
  const uploadIconUri = require('../../../upload.jpg');
  const [image, setImage] = useState('');
  const [base64Image, setBase64Image] = useState('');

  const commonOptions = {
    cropWidth: 1,
    cropHeight: 1,
    includeBase64: true,
    compressQuality: 0.8,
    compressFormat: 'jpeg',
    circularCrop: true,
    freeStyleCropEnabled: true,
    cropGridEnabled: true,
    showNativeCropControls: false,
    headerTitle: 'Preview',
    footerButtonLayout: 'vertical',
    footerButtonOrder: 'uploadFirst',
    topLeftControl: 'upload',
    topRightControl: 'cancel',
    cancelText: 'Cancel',
    uploadText: 'Upload',
    uploadButtonIconUri: uploadIconUri,
  };

  const open = async (source: 'camera' | 'gallery') => {
    try {
      const res = await openImageCropPicker({
        source,
        ...commonOptions,
      });

      const uri = res?.path ? `file://${res.path}` : '';
      setImage(uri);
      setBase64Image(res?.base64 ?? '');
    } catch (e) {
      console.log('Crop failed', e);
    }
  };

  return (
    
      

       open('camera')}>
        Camera
      

       open('gallery')}>
        Gallery
      

      

      
    
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

---

🎯 Key features

🔵 Circular crop (perfect for profile pictures)

circularCrop: true

✂️ Free‑style cropping

freeStyleCropEnabled: true

Let users resize the crop area freely.

🎨 Fully custom header

You can customize:

• Background color
• Title
• Alignment
• Padding
• Height
• Font styling

🔘 Fully custom footer buttons

Control:

• Layout (horizontal / vertical)
• Button order
• Icons (local or remote)
• Icon size
• Tint color
• Padding
• Border radius

You are no longer locked into the default native UI.

🌓 Native controls (optional)

If you prefer the system crop toolbar:

showNativeCropControls: true,
controlsPlacement: 'bottom',

---

📦 Output format

The picker returns a structured object:

{
  path: string;          // local file path
  width: number;         // image width
  height: number;        // image height
  mime: string;           // mime type (e.g., 'image/jpeg')
  base64?: string;        // optional Base64 string when includeBase64 is true
}

Enjoy fully customizable image cropping on both Android and iOS!

# Fullscreen Mode Buttons

```html
Enter fullscreen mode
Exit fullscreen mode

These buttons work perfectly for:

• API uploads
• Firebase Storage
• AWS S3
• Multipart forms
• Instant preview

---

📱 Real‑World Use Cases

• Profile image upload
• KYC document capture
• E‑commerce product listing
• Social media post creation
• Avatar builders
• Custom design tools

---

🚀 What Makes This Different?

Instead of forcing a native UI, this solution gives you:

• ✔ UI‑level customization
• ✔ Native performance
• ✔ Circular + freestyle crop
• ✔ Header/Footer full control
• ✔ Clean base64 output
• ✔ Android + iOS support

---

📌 Final Thoughts

If you’re building a production React Native app and want:

• Full branding control
• Clean UX
• No native UI limitations
• Proper base64 support

…this package is built for that exact use case.

If this helped you, consider:

• 💬 Sharing feedback
• 🐛 Reporting improvements