@reo-tech/reo-expo-file-picker v1.0.3

ReoExpoFilePicker

ReoExpoFilePicker is a versatile React Native component designed for Expo applications, enabling seamless file and image selection with customizable options and intuitive user interactions.

Features

• Dual File Picking Modes:
  • Tap (Single Press): Opens the camera to capture a new image or record a video.
  • Long Press: Opens the device's media library (for images/videos) or document picker (for other file types like PDFs), based on the documentType prop.
• Permission Handling: Automatically requests necessary permissions for camera, media library, or documents before attempting to access them.
• Haptic Feedback: Provides haptic feedback (vibration) on long press for an enhanced user experience.
• Customizable UI:
  • Allows specifying custom text and styles for the picker button.
  • Supports custom icons (e.g., from MaterialCommunityIcons) for the button.
• File Type Specificity: The documentType prop dictates whether to open the image gallery or the document picker on long press.
• Callback for Selection: The onFilesSelected prop provides a callback function that receives an array of selected file URIs.
• TypeScript Support: Written in TypeScript for better type safety and developer experience.

Installation

npm install reo-expo-file-picker
# or
yarn add reo-expo-file-picker

Ensure you have expo-image-picker, expo-document-picker, and react-native-vector-icons (if using custom icons) installed and configured in your Expo project.

expo install expo-image-picker expo-document-picker
# If using MaterialCommunityIcons or other icon sets
npm install react-native-vector-icons
# or
yarn add react-native-vector-icons

Usage

import React, { useState } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import ReoExpoFilePicker from 'reo-expo-file-picker';

export default function App() {
  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);

  const handlePickSuccess = (files: PickedFileInfo[]) => {
    console.log('Files selected:', files);
  };

  const handlePickError = (error: FileError) => {
    console.error('Picking error:', error.message, error.details);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>ReoExpoFilePicker Demo</Text>

        <ReoExpoFilePicker
        onPickSuccess={handlePickSuccess}
        onPickError={handlePickError}
        documentType="image" // or "pdf"
        buttonShape="rectangle" // or "rectangle"
        customstyle={{
          idleColor: '#3498db',
          successColor: '#2ecc71',
          errorColor: '#e74c3c',
        }}
        buttonContent={<Text style={{ color: 'white', fontSize: 16 }}>Choose image</Text>}
      />


    
    </View>
  );
}

Props

How it Works

• Single Tap:
  1. Requests camera permissions (ImagePicker.requestCameraPermissionsAsync).
  2. If granted, launches the device camera (ImagePicker.launchCameraAsync).
  3. Selected media URI is passed to onFilesSelected.
• Long Press:
  1. Checks documentType:
     • If documentType indicates images (e.g., "image/*", "image/jpeg"), it requests media library permissions (ImagePicker.requestMediaLibraryPermissionsAsync).
     • Otherwise, it requests document picker permissions (implicitly handled by DocumentPicker.getDocumentAsync).
  2. If permissions are granted, vibrates the device (Vibration.vibrate()).
  3. Launches the appropriate picker:
     • ImagePicker.launchImageLibraryAsync for images.
     • DocumentPicker.getDocumentAsync for other document types.
  4. Selected file URI(s) are passed to onFilesSelected.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details (if available, otherwise assume MIT).