react-native-android-image-picker

A lightweight and easy-to-use React Native module for selecting multiple images from the Android gallery. Supports both default UI and custom children components. Returns URI, Base64, Size, and MimeType.

Installation

npm install react-native-android-image-picker

Android Setup (Important)

Add the following permissions to your android/app/src/main/AndroidManifest.xml file:

<manifest ...>
    <!-- Required for reading images from gallery -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    ...
</manifest>

Usage

Here is a complete example including imports and state management.

import React, { useState } from 'react';
import { StyleSheet, View, Text, Image, ScrollView } from 'react-native';
import { ImagePicker } from 'react-native-android-image-picker';

export default function App() {
  const [images, setImages] = useState([]);

  const handleSelect = (files) => {
    console.log('Selected Files:', files);
    setImages(files);
  };

  const handleError = (err) => {
    console.error('Error:', err);
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.header}>Android Image Picker</Text>

      {/* 1. Default UI Usage */}
      <Text style={styles.subHeader}>Default Appearance:</Text>
      <ImagePicker
        maxImage={2} // Select max 2 images
        onSelect={handleSelect}
        onError={handleError}
        style={styles.defaultButton}
      />

      <View style={styles.separator} />

      {/* 2. Custom UI Usage */}
      <Text style={styles.subHeader}>Custom Child Component:</Text>
      <ImagePicker
        maxImage={5} // Select max 5 images
        onSelect={handleSelect}
        onError={handleError}
      >
        <View style={styles.customButton}>
          <Text style={styles.customButtonText}>📸 Select Photos (Max 5)</Text>
        </View>
      </ImagePicker>

      {/* Display Selected Images */}
      <View style={styles.resultContainer}>
        {images.map((img, index) => (
          <View key={index} style={styles.imageCard}>
            <Image source={{ uri: img.uri }} style={styles.previewImage} />
            <View style={styles.infoContainer}>
              <Text numberOfLines={1} style={styles.infoText}>📍 URI: {img.uri}</Text>
              <Text style={styles.infoText}>💾 Size: {(img.size / 1024).toFixed(2)} KB</Text>
              <Text style={styles.infoText}>📄 Type: {img.type}</Text>
              <Text style={styles.infoText}>🔐 Base64: {img.base64 ? "Available" : "N/A"}</Text>
            </View>
          </View>
        ))}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f2f2f2',
    flexGrow: 1,
  },
  header: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
    color: '#333',
  },
  subHeader: {
    fontSize: 14,
    fontWeight: '600',
    marginBottom: 10,
    marginTop: 10,
    color: '#555',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
    marginVertical: 20,
  },
  defaultButton: {
    backgroundColor: '#ddd',
    padding: 10,
    borderRadius: 8,
    alignItems: 'center',
  },
  customButton: {
    backgroundColor: '#6200ee',
    padding: 15,
    borderRadius: 30,
    alignItems: 'center',
    elevation: 3,
  },
  customButtonText: {
    color: '#fff',
    fontWeight: 'bold',
  },
  resultContainer: {
    marginTop: 20,
  },
  imageCard: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    padding: 10,
    borderRadius: 8,
    marginBottom: 10,
    elevation: 2,
  },
  previewImage: {
    width: 60,
    height: 60,
    borderRadius: 8,
    backgroundColor: '#eee',
  },
  infoContainer: {
    marginLeft: 10,
    flex: 1,
    justifyContent: 'center',
  },
  infoText: {
    fontSize: 10,
    color: '#444',
  }
});

API Reference

Props

| Prop | Type | Default | Description | |---|---|---|---| | maxImage | number | 1 | Maximum number of images user can select. | | onSelect | function | Required | Callback function that returns an array of selected images. | | onError | function | Optional | Callback function for error handling. | | style | ViewStyle | Optional | Styles for the touchable container (if using default UI). | | children | ReactNode | Optional | Custom component to render inside the touchable area. |

Response Object

The onSelect callback returns an array of objects with the following structure:

[
  {
    uri: "content://media/external/...", // The image URI
    type: "image/jpeg",                  // Mime type
    size: 45032,                         // Size in bytes
    base64: "/9j/4AAQSkZJRg..."          // Base64 string of the image
  }
]

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT