npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

v0.2.0

Published

A react native component that will get all the media files (images and video) from device gallery and allow to select items

Downloads

13

Readme

@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