https://github.com/geminidsystems/react-native-select-attachment
Select new or existing photos, videos, files from your device for use in react-native
https://github.com/geminidsystems/react-native-select-attachment
camera drive files google photo picker react-native
Last synced: 2 months ago
JSON representation
Select new or existing photos, videos, files from your device for use in react-native
- Host: GitHub
- URL: https://github.com/geminidsystems/react-native-select-attachment
- Owner: GeminidSystems
- Created: 2020-08-25T19:04:57.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T17:09:59.000Z (over 3 years ago)
- Last Synced: 2025-06-17T19:03:30.519Z (about 1 year ago)
- Topics: camera, drive, files, google, photo, picker, react-native
- Language: Swift
- Homepage:
- Size: 55.7 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# `react-native-select-attachment`
## Supported Versions
| react-native-select-attachment | react-native |
| --- | --- |
| >= 0.0.1 | 0.60+
## Description
`react-native-select-attachment` allows the selection of photos, videos, or other files (local or cloud storage like Google Drive, Dropbox, Box). The `fileName`, `fileType`, and `base64` file data are returned to react-native. This is useful if you want to display or store file data from the device into your application.
## Getting Started
`$ npm install react-native-select-attachment --save`
#### Android
Not supported in the current release, check back for future releases or create a PR
#### iOS
CocoaPods on iOS needs this extra step
```
npx pod-install
```
To use the react-module, you'll first have to write some privacy descriptions for accessing the photo library and the camera. Open your `Info.plist` as source and populate the usage descriptions as shown below:
``` xml
NSMicrophoneUsageDescription
For people to hear you during meetings, we need access to your microphone.
NSCameraUsageDescription
This app wants to take pictures.
NSPhotoLibraryUsageDescription
This app wants to use your photos.
```
## Usage
To import into your react app, import the SelectAttachmentButton component.
```javascript
import SelectAttachment from 'react-native-select-attachment';
```
And call `showPicker` as shown below:
```javascript
var options = {
maxFileSize: 10,
fileTypes: ['png', 'jpg', 'pdf'],
disableCameraPhotos: false,
disableCameraVideos: false,
disablePhotos: false,
disableVideos: false,
disableFiles: false,
cameraLabel: 'Camera',
albumLabel: 'Album',
filesLabel: 'Files',
enableImageScaling : true,
imageScale : 0.90,
maxImageWidth : 950
};
SelectAttachment.showPicker(options, (res) => {
if(res.error){
console.error(res.error);
} else {
console.error(res.fileName);
console.error(res.fileType);
console.error(res.base64);
}
});
```
# Reference
## Options
### `maxFileSize`
The max file size allowed of the selected file (in MB)
| Type | Required | Default |
| -------- | -------- | ----- |
| [String] | No | null |
---
### `fileTypes`
The file types that will be allowed for selection (in Files). If left blank all file types are allowed for selection
Supported options are:
- png
- pdf
- jpg
- csv
| Type | Required | Default |
| -------- | -------- | ----- |
| [String] | No | ['all'] |
---
### `disablePhotos`
Disables the `Camera` from the popup options
| Type | Required | Default |
| -------- | -------- | -------- |
| Boolean | No | false |
---
### `disableFiles`
Disables the `Files` from the popup options
| Type | Required | Default |
| -------- | -------- | -------- |
| Boolean | No | false |
---
### `cameraLabel`
Overrides the label for `Camera` popup
| Type | Required | Default |
| -------- | -------- | -------- |
| String | No | 'Camera' |
---
### `albumLabel`
Overrides the label for `Album` popup
| Type | Required | Default |
| -------- | -------- | -------- |
| String | No | 'Album' |
---
### `filesLabel`
Overrides the label for `Files` popup
| Type | Required | Default |
| -------- | -------- | -------- |
| String | No | 'Files' |
---
### `enableImageScaling`
Allows scaling images to reduce file size.
| Type | Required | Default |
| -------- | -------- | -------- |
| Boolean | No | false |
---
### `imageScale`
If `enableImageScaling` is true, the image resolution is reduced by a percentage entered. Example 0.5 would reduce the resolution by 50%
| Type | Required | Default |
| -------- | -------- | -------- |
| Decimal | No | 1.0 |
---
### `maxImageWidth`
The max width of the image in pixels. Images will be scaled to the entered value. This is useful to reduce file size.
| Type | Required | Default |
| -------- | -------- | -------- |
| Integer | No | 950 |
---