Skip to content

Latest commit

 

History

History
260 lines (211 loc) · 8.32 KB

README.md

File metadata and controls

260 lines (211 loc) · 8.32 KB
Raw

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

npm npm npm npm

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