DEV Community

Cover image for 🚀 React Native: Fully Customizable Image Crop Picker (Android + iOS)
Amit Kumar
Amit Kumar

Posted on

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

#reactnative #android #ios #imagepicker

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

📦 Installation 

yarn add react-native-customizable-image-crop-picker
Enter fullscreen mode Exit fullscreen mode

For iOS

cd ios && pod install
Enter fullscreen mode Exit fullscreen mode

🛠 Complete Working Example

Here’s a clean implementation:

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) => {
    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 (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />

      <Pressable onPress={() => open('camera')}>
        <Text>Camera</Text>
      </Pressable>

      <Pressable onPress={() => open('gallery')}>
        <Text>Gallery</Text>
      </Pressable>

      <Image source={{ uri: image }} style={{ width: 150, height: 150 }} />

      <Image
        source={{ uri: `data:image/jpeg;base64,${base64Image}` }}
        style={{ width: 150, height: 150 }}
      />
    </View>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

🎯 Key Features

🔵 Circular Crop (Perfect for Profile Pictures)

circularCrop: true
Enter fullscreen mode Exit fullscreen mode

✂️ Free Style Cropping 

freeStyleCropEnabled: true
Enter fullscreen mode Exit fullscreen mode

Let users resize 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 not locked into default native UI anymore.

🌓 Native Controls (Optional)

If you prefer native system crop toolbar:

showNativeCropControls: true
controlsPlacement: 'bottom'
Enter fullscreen mode Exit fullscreen mode

📦 Output Format

You get structured output:

{
  path: string,
  width: number,
  height: number,
  mime: string,
  base64?: string
}
Enter fullscreen mode Exit fullscreen mode

Which works 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 native UI, this 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

Top comments (0)