Installation

Add the dependency:

npm i @paraboly/react-native-media-picker

Peer Dependencies

IMPORTANT! You need install them

"@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

<key>NSCameraUsageDescription</key>
<string>This allows us to capture and use the the captured photo</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>This allows us to show/pick a photo from your library</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This allows us to show/pick a photo from your library</string>

Android

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Usage

Import

import MediaPicker from "@paraboly/react-native-media-picker";

Basic Usage

<MediaPicker>

Advanced Usage

You can check the example :) Put your own logic for galleryOnPress or cameraOnPress both returns the callback of the images.

<MediaPicker
  multiple
  ref={(ref) => (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

this.mediaPicker.openModal();

Close

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

• 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.