react-native-universal-attach-picker

Hello. That module is wrapper for react-native-image-picker and react-native-document-picker | | | |--|--|

Tested with

"react": "17.0.2",

"react-native": "0.66.4",

Install

yarn add react-native-universal-attach-picker

or

npm install react-native-universal-attach-picker

Install dependencies (Check instructions of these packages in their repositories)

yarn add react-native-image-picker react-native-document-picker

or

npm install react-native-image-picker react-native-document-picker

Then for iOS

npx pod-install

or

cd ios && pod install

Then s Add the appropriate keys to your Info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>description</string>
<key>NSCameraUsageDescription</key>
<string>description</string>
<key>NSMicrophoneUsageDescription</key>
<string>description</string>

Usage

import  React, {useState} from  'react';
import {Text, View, Button, StyleSheet} from  'react-native';

// import
import {
    AttachmentPicker,
    PickInModal,
    } from  'react-native-universal-attach-picker';
	
// define options for pickers
// Options for launchImageLibrary of 'react-native-image-picker'
let  galeryOptions = { 
    selectionLimit:  2,
    mediaType:  'mixed',
};

// Options for launchCamera of 'react-native-image-picker'
let  VideoOptions = {
    mediaType:  'video',
};

// Options for launchCamera of 'react-native-image-picker'
let  PhotoOptions = {
    mediaType:  'photo',
};

// Options for DocumentPicker of 'react-native-document-picker'
let  filesOptions = {
    presentationStyle:  'fullScreen',
    allowMultiSelection:  true,
};

// init object
const  attachmentPicker = new  AttachmentPicker(
    filesOptions,
    galeryOptions,
    VideoOptions,
    PhotoOptions,
);

// create functional component
const  PickAttaches = () => {
    return (
	    <View>
		    <Button
			    style={{marginTop:  5}}
			    title="Galery"
			    onPress={async () => {
				    const  response = await  attachmentPicker.pickGalery();
				    console.log(response);
			    }}
		    />
		    <View  style={{marginTop:  5}}>
			    <Button
				    title="Files"
				    onPress={async () => {
					    const  response = await  attachmentPicker.pickFiles();
					    console.log(response);
					}}
			    />
			</View>
		    <View  style={{marginTop:  5}}>
			    <Button
				    title="MakePhoto"
				    onPress={async () => {
					    const  response = await  attachmentPicker.makePhoto();
					    console.log(response);
				    }}
			    />
			</View>
	    
		    <View  style={{marginTop:  5}}>
			    <Button
				    title="Make Video"
				    onPress={async () => {
				    const  response = await  attachmentPicker.makeVideo();
				    console.log(response);
				    }}
				 />
			</View>
		    
		    <View  style={{marginTop:  5}}>
			    <PickInModal
				    buttonText="Show modal menu"
				    openButtonStyle={{}}
				    openButtonTextStyle={{}}
				    asButton={true}
				    buttonCancelText="CANCEL"
				    buttons={[
						{
						    label:  'Select from galery',
						    onPress:  async () => {
							    const  response = await  attachmentPicker.pickGalery();
							    console.log(response);
							},
						},
						{
							label:  'Select from files',
							onPress:  async () => {
								const  response = await  attachmentPicker.pickFiles();
								console.log(response);
							},
						},
						{
							label:  'Make photo',
							onPress:  async () => {
								const  response = await  attachmentPicker.makePhoto();
								console.log(response);
							},
						},
			    
					    {
						    label:  'Make video',
						    onPress:  async () => {
							    const  response = await  attachmentPicker.makeVideo();
							    console.log(response);
							},
						},
					]}
				/>
		    </View>
	    </View>
	);
};
export  default  PickAttaches;

Init options

On create object receive 4 params

const  attachmentPicker = new  AttachmentPicker(
    DocumentPickerOptions,
    GaleryPickerOptions,
    VideoPickerOptions,
    PhotoPickerOptions,
);

| № | Name |Description |Default| |--|--|--|--| | 1 | DocumentPickerOptions | Options for react-native-document-picker | { presentationStyle: 'fullScreen', copyTo: 'cachesDirectory',allowMultiSelection: true }; | | 2 | GaleryPickerOptions | Options for launchCamera of react-native-image-picker | { }; | | 2 | VideoPickerOptions | Options for launchImageLibrary of react-native-image-picker | { mediaType: 'video' }; | | 2 | PhotoPickerOptions | Options for launchImageLibrary of react-native-image-picker | { mediaType: 'photo' }; |

Result

All methods return JSON

{
    // arrays of objects
    files: [
	    {
		    uri: 'file:/// path to file',
		    filename: 'filename.jpg',
		    type: 'image/jpeg'
	    }
    ],
    original: [ /* original JSON Object which was returned react-native-document-picker or react-native-image-picker */ ]
}

UI components

For convenience, a component PickInModal has been created that opens a list of buttons (which can be styled) in a modal window for selection

PickInModal Props

| Name | Description | Type | Default | Required | |--|--|--|--|--| | buttonText | String |Text for open modal button | Pick the files | No | | openButtonStyle | style Object | Style for TouchableOpacity of open modal button | {} | No | | openButtonTextStyle | style Object | Style for text of open modal button | {} | No | | asButton | bool | Render button as RN Button component. Color props will get from openButtonStyle backgroundColor properties | false | No | | modalContainerStyle |style Object | Style for main View in Modal component (Fullscreen, transparent) | {} | No | | modalContentStyle |Style Object | Style for in content View in container (Centerd, not transparent)| {} | No | | buttons |Array of Objects | List of buttons for render in modal | { label: 'Label for button', onPress: async () => {// OnPress functon for button}}| No | | pickButtonStyle |style Object | Style for TouchableOpacity for pick button | {} | No | | pickButtonTextStyle |style Object | Style for text in pick button | {} | No | | buttonCancelText | string | Text for the last button to close modal | Cancel | No |