@around25/react-native-gallery-media-picker

This is a react-native component that fetches gallery files ( images and video ) and render them in a list. Every picture or video can be selected the array with selected items is returned in a callback.

• works on iOS and Android

Release notes v2.0

With the release of version 2.0 of this package, the functionality has been overhauled to work in the following manner:

• firstly, display a list of albums for the user to choose from
• secondly, display the media that are associated with the selected album

This is the first implementation of the new functionality and it will receive incremental updates in the future.

Features

• creates a list of albums
• fetches images and videos for the selected album
• categorize the media files by the date they were created ()
• render a button that offers a way to go back to the album list
• set maximum number of selected items
• custom loader component
• customizable default loader
• option to select just one item
• option to change the number of initial list size
• fetch only Photos, only Videos or both
• set assets location ( albums )
• custom text if there are no photos or videos in gallery
• set number of items per row
• set media file margins

Categorized by date

With version 2.0, after selecting an album, the user is presented with a gallery of media files categorized by the date they were created.

These are the categories:

• "Today" = files that were created after 00:00 of today
• "This Week" = files that were created after 00:00 of Monday of the current week
• "This Month" = files that were created after 00:00 of the first day of the current month
• [month name] (descending order) = files that were created between 00:00 of the first day of the previous month and 00:00 of the first day of the current month
• [year] (descending order) = files tht were created between 00:00 of 1st of January of the previous year and 00:00 of 1st of January of the current year

The categories, that are empty, are not rendered.

Installation

$ npm i @around25/react-native-gallery-media-picker --save

iOS

Add in info.plist

  <dict>
    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
  </dict>
</plist>

Android

Add the required permissions in AndroidManifest.xml

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

And then request camera permission in your component

import { PermissionsAndroid } from 'react-native';


  async requestCameraPermission() {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          'title': 'Cool Photo App Camera Permission',
          'message': 'Cool Photo App needs access to your camera ' +
          'so you can take awesome pictures.'
        }
      )
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log("Camera permission accepted")
      } else {
        console.log("Camera permission denied")
      }
    } catch (err) {
      console.warn(err)
    }
  }

Options

Option	iOS	Android	Description	Default	Options	Type
batchSize	YES	YES	How many items to render in the initial batch. This should be enough to fill the screen but not much more.	1	-	{integer}
groupTypes	YES	NO	Specifies which group types to filter the results to	SavedPhotos	All, Album, Event, Faces, Library, PhotoStream, SavedPhotos	{string}
assetType	YES	YES	Specifies filter on assets	Photos	All, Photos, Videos	{string}
selectSingleItem	YES	YES	If true only one item can be selected	false	true, false	{boolean}
emptyGalleryText	YES	YES	Specifies the text to display if there are no images or videos	There are no photos or video	-	{string}
maximumSelectedFiles	YES	YES	Specifies the number of files that can be selected	15	-	{integer}
selected	YES	YES	Specifies the array with selected files that are retuned from callback in your component	[]	-	{array}
itemsPerRow	YES	YES	Specifies the number of items on one row	3	-	{integer}
imageMargin	YES	YES	Specifies margins of the image	5	-	{integer}
customLoader	YES	YES	Specifies custom component with loading indicator		-	{component}
customSelectMarker	YES	YES	Specifies custom component with select marker		-	{component}
markIcon	YES	YES	Specifies custom icon for default marker	-	-	{image}

Methods

Method	Description	Type
callback	Callback with selected files and current selected file	{function}

Example

import React, { Component } from 'react';
import { StyleSheet, ActivityIndicator, View, Image, PermissionsAndroid } from 'react-native';

import GalleryMediaPicker from 'react-native-gallery-media-picker'
const marker = require('./check.png');

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      totalFiles: 0,
      selected: [],
      hasPermission: false
    }
  }


  async requestCameraPermission() {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          'title': 'Cool Photo App Camera Permission',
          'message': 'Cool Photo App needs access to your camera ' +
          'so you can take awesome pictures.'
        }
      )
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        this.setState({hasPermission: true })
      } else {
        console.log("Camera permission denied")
      }
    } catch (err) {
      console.warn(err)
    }
  }

  componentWillMount(){
    this.requestCameraPermission();
  }

  getSelectedFiles(files, current) {
    this.setState({ totalFiles: files.length, selected: files });
    console.log('Current: ',current);
    console.log(this.state.selected);
  }

  /**
  * @description Render custom loader that shows when files are fetching
  */
  renderLoader(){
    return(
      <ActivityIndicator color="red" size="large"/>
    )
  }

  /**
  * @description Render custom marker
  * This will cancel the "markIcon" option
  */
  renderSelectMarker(){
    return(
    <View style={styles.markerWrapper}>
      <Image source={marker} style={styles.marker}/>
    </View>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        {this.state. hasPermission && <GalleryMediaPicker
          groupTypes='All'
          assetType='All'
          markIcon={marker}
          customSelectMarker={this.renderSelectMarker()}
          batchSize={1}
          emptyGalleryText={'There are no photos or video'}
          maximumSelectedFiles={3}
          selected={this.state.selected}
          itemsPerRow={3}
          imageMargin={3}
          customLoader={this.renderLoader()}
          callback={this.getSelectedFiles.bind(this)} />}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  marker:{
    width: 30,
    height: 30,
    zIndex: 2445,
    top: 5,
    right: 5,
    backgroundColor: 'transparent',
  },
  markerWrapper: {
    position: 'absolute',
    flex:1,
    top: 0 ,
    zIndex: 2445,
    bottom: 0,
    left: 0,
    right: 0,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

Todos

• add more options
• add filter buttons
• add overlay with total video duration for video files
• add more customization
• add an "All" album
• add the possibility to disable categorization by date

License

MIT