https://github.com/paraboly/react-native-media-picker
Easy to use media picker modal for React Native by Paraboly
https://github.com/paraboly/react-native-media-picker
Last synced: about 1 year ago
JSON representation
Easy to use media picker modal for React Native by Paraboly
- Host: GitHub
- URL: https://github.com/paraboly/react-native-media-picker
- Owner: Paraboly
- Created: 2020-01-08T11:00:24.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-05-07T17:06:02.000Z (about 3 years ago)
- Last Synced: 2025-03-21T21:11:56.571Z (about 1 year ago)
- Language: TypeScript
- Homepage: https:/paraboly.com
- Size: 14.9 MB
- Stars: 11
- Watchers: 0
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/Paraboly/react-native-media-picker)
[](https://github.com/Paraboly/react-native-media-picker)
[](https://www.npmjs.com/package/@paraboly/react-native-media-picker)
[](https://www.npmjs.com/package/@paraboly/react-native-media-picker)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```ruby
npm i @paraboly/react-native-media-picker
```
## Peer Dependencies
###### IMPORTANT! You need install them
```js
"@freakycoder/react-native-helpers": ">= 0.1.2",
"react-native-image-crop-picker": ">= 0.26.2",
"react-native-modalize": ">= 2.0.0",
"react-native-vector-icons": ">= 6.6.0",
"react-native-dynamic-vector-icons": ">= 0.2.1",
```
## iOS & Android Permissions
### iOS
```plist
NSCameraUsageDescription
This allows us to capture and use the the captured photo
NSPhotoLibraryAddUsageDescription
This allows us to show/pick a photo from your library
NSPhotoLibraryUsageDescription
This allows us to show/pick a photo from your library
```
### Android
```xml
```
# Usage
## Import
```js
import MediaPicker from "@paraboly/react-native-media-picker";
```
## Basic Usage
```jsx
```
## Advanced Usage
You can check the example :) Put your own logic for galleryOnPress or cameraOnPress both returns the callback of the images.
```jsx
(this.mediaPicker = ref)}
cameraOnPress={(image: any) => {
this.setState({ image });
}}
galleryOnPress={(images: any) => {
this.setState({
image: null,
images: images.map((image: any) => {
return {
uri: image.path,
width: image.width,
height: image.height,
mime: image.mime,
};
}),
});
// ? Single Image (Multiple = false)
// this.setState({
// image: {
// uri: image.path,
// width: image.width,
// height: image.height,
// mime: image.mime
// }
// });
}}
/>
```
## Open/Close The MediaPicker Modal
#### Open
```js
this.mediaPicker.openModal();
```
#### Close
```js
this.mediaPicker.closeModal();
```
# Configuration - Props
| Property | Type | Default | Description |
| ---------------------------- | :-------: | :---------: | ----------------------------------------------------------------------------- |
| IconComponent | component | Icon | set your own Icon component such as Icon from react-native-vector-icons |
| multiple | boolean | true | change the picking media's as single or multiple at once |
| cameraText | string | Camera | change the camera button's text |
| galleryText | string | Gallery | change the gallery button's text |
| backgroundColor | color | #90a1fc | change the modal's background color |
| onCameraPress | function | default | set your own logic when camera is on pressed **(please check the example)** |
| onGalleryPress | function | default | set your own logic when gallery is on pressed **(please check the example)** |
| cameraIconName | string | camera | change the camera's icon name |
| cameraIconType | string | FontAwesome | change the camera's icon type |
| cameraIconColor | color | #fdfdfd | change the camera's icon color |
| cameraIconSize | number | 20 | change the camera's icon size |
| galleryIconName | string | md-photos | change the gallery's icon name |
| galleryIconType | string | Ionicons | change the gallery's icon type |
| galleryIconColor | color | #fdfdfd | change the gallery's icon color |
| galleryIconSize | number | 20 | change the gallery's icon size |
| cameraButtonBackgroundColor | color | #fdfdfd | change the camera button's background color |
| galleryButtonBackgroundColor | color | #fdfdfd | change the gallery button's background color |
| cameraButtonSize | number | 50 | change the camera button's whole size |
| galleryButtonSize | number | 50 | change the gallery button's whole size |
| cameraTextColor | color | #fdfdfd | change the camera button's text color |
| galleryTextColor | color | #fdfdfd | change the gallery button's text color |
| compressImageQuality | number | 0.5 | change the quality of your photo |
| onCameraButtonPressed | function | default | set instead of `react-native-image-crop-picker` library when preesing camera |
| onGalleryButtonPressed | function | default | set instead of `react-native-image-crop-picker` library when preesing gallery |
## Future Plans
- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium
## Author
FreakyCoder, kurayogun@gmail.com
## License
React Native Media Picker by Paraboly is available under the MIT license. See the LICENSE file for more info.