react-native-custom-image-uploader

A lightweight and customizable React Native hook to pick and upload images with manual control — perfect for mobile apps needing simple image upload functionality without heavy dependencies.

---

Features

• Pick images from camera or gallery
• Upload images to your backend API endpoint
• Simple and intuitive hook interface
• No heavy external dependencies
• Easy to customize and extend

---

Installation

npm install react-native-custom-image-uploader

or

yarn add react-native-custom-image-uploader

---

Usage

Example 1: Basic Image Picker & Upload

import React from 'react';
import { View, Button, Image, Text } from 'react-native';
import useImageUploader from 'react-native-custom-image-uploader';

export default function App() {
  const { pickImage, uploadImage, image, uploadStatus } = useImageUploader({
    uploadUrl: 'https://your-backend-api.com/upload',
  });

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {image && (
        <Image
          source={{ uri: image.uri }}
          style={{ width: 200, height: 200, marginBottom: 20 }}
        />
      )}
      <Button title="Pick Image" onPress={pickImage} />
      <Button title="Upload Image" onPress={uploadImage} disabled={!image} />
      {uploadStatus && <Text>Status: {uploadStatus}</Text>}
    </View>
  );
}

---

Example 2: Handling Upload Response and Errors

import React, { useState } from 'react';
import { View, Button, Image, Text, Alert } from 'react-native';
import useImageUploader from 'react-native-custom-image-uploader';

export default function App() {
  const [responseMsg, setResponseMsg] = useState('');
  const { pickImage, uploadImage, image, uploadStatus } = useImageUploader({
    uploadUrl: 'https://your-backend-api.com/upload',
    onUploadSuccess: (response) => {
      setResponseMsg('Upload successful! File URL: ' + response.fileUrl);
    },
    onUploadError: (error) => {
      Alert.alert('Upload Failed', error.message || 'Unknown error');
    },
  });

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
      {image && (
        <Image
          source={{ uri: image.uri }}
          style={{ width: 200, height: 200, marginBottom: 20 }}
        />
      )}
      <Button title="Pick Image" onPress={pickImage} />
      <Button title="Upload Image" onPress={uploadImage} disabled={!image} />
      {uploadStatus && <Text>Status: {uploadStatus}</Text>}
      {responseMsg !== '' && <Text>{responseMsg}</Text>}
    </View>
  );
}

---

API

useImageUploader(options)

• options (object):

  • uploadUrl (string, required): Backend API endpoint URL for image upload.

  • onUploadSuccess (function, optional): Callback called with server response on successful upload.

  • onUploadError (function, optional): Callback called with error object/message on upload failure.

Returns:

• pickImage — Function to open image picker (camera/gallery)
• uploadImage — Function to upload the selected image
• image — Selected image object or null
• uploadStatus — Upload status string: "uploading", "success", "error", or null

---

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

---

Support

If you find this package useful, please consider giving it a ⭐️ on GitHub!