{"id":28169472,"url":"https://github.com/around25/react-native-gallery-media-picker","last_synced_at":"2025-05-15T16:18:04.989Z","repository":{"id":31187409,"uuid":"127158610","full_name":"Around25/react-native-gallery-media-picker","owner":"Around25","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-07T15:50:14.000Z","size":983,"stargazers_count":13,"open_issues_count":3,"forks_count":8,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-15T16:17:18.687Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Around25.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-28T15:11:03.000Z","updated_at":"2020-11-11T06:16:05.000Z","dependencies_parsed_at":"2022-09-25T02:41:00.285Z","dependency_job_id":null,"html_url":"https://github.com/Around25/react-native-gallery-media-picker","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Around25%2Freact-native-gallery-media-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Around25%2Freact-native-gallery-media-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Around25%2Freact-native-gallery-media-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Around25%2Freact-native-gallery-media-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Around25","download_url":"https://codeload.github.com/Around25/react-native-gallery-media-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374530,"owners_count":22060614,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-15T16:17:16.314Z","updated_at":"2025-05-15T16:18:04.982Z","avatar_url":"https://github.com/Around25.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @around25/react-native-gallery-media-picker\n\n\n![npm](https://img.shields.io/npm/v/@around25/react-native-gallery-media-picker.svg) ![npm](https://img.shields.io/npm/l/@around25/react-native-gallery-media-picker.svg) ![npm](https://img.shields.io/npm/dw/@around25/react-native-gallery-media-picker.svg) ![npm](https://img.shields.io/npm/dt/@around25/react-native-gallery-media-picker.svg)\n\n\n\n\nThis 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.\n\n  - works on iOS and Android\n\n### Release notes v2.0\n\nWith the release of version 2.0 of this package, the functionality has been overhauled to work in the following manner:\n  - firstly, display a list of albums for the user to choose from\n  - secondly, display the media that are associated with the selected album\n\nThis is the first implementation of the new functionality and it will receive incremental updates in the future.\n\n### Features\n\n  - creates a list of albums\n  - fetches images and videos for the selected album\n  - categorize the media files by the date they were created ()\n  - render a button that offers a way to go back to the album list\n  - set maximum number of selected items\n  - custom loader component\n  - customizable default loader\n  - option to select just one item\n  - option to change the number of initial list size\n  - fetch only Photos, only Videos or both\n  - set assets location ( albums )\n  - custom text if there are no photos or videos in gallery\n  - set number of items per row\n  - set media file margins\n\n### Categorized by date\n\nWith version 2.0, after selecting an album, the user is presented with a gallery of media files categorized by the date they were created.\n\nThese are the categories:\n  - \"Today\" = files that were created after 00:00 of today\n  - \"This Week\" = files that were created after 00:00 of Monday of the current week\n  - \"This Month\" = files that were created after 00:00 of the first day of the current month\n  - [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\n  - [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\n\nThe categories, that are empty, are not rendered.\n\n### Installation\n\n```sh\n$ npm i @around25/react-native-gallery-media-picker --save\n```\n\n### iOS\n\nAdd in `info.plist`\n\n```\u003cplist version=\"1.0\"\u003e\n  \u003cdict\u003e\n    ...\n    \u003ckey\u003eNSPhotoLibraryUsageDescription\u003c/key\u003e\n    \u003cstring\u003e$(PRODUCT_NAME) would like access to your photo gallery\u003c/string\u003e\n    \u003ckey\u003eNSPhotoLibraryAddUsageDescription\u003c/key\u003e\n    \u003cstring\u003e$(PRODUCT_NAME) would like to save photos to your photo gallery\u003c/string\u003e\n  \u003c/dict\u003e\n\u003c/plist\u003e\n```\n\n### Android\n\nAdd the required permissions in `AndroidManifest.xml`\n\n```\n\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n```\nAnd then request camera permission in your component\n\n```\nimport { PermissionsAndroid } from 'react-native';\n\n\n  async requestCameraPermission() {\n    try {\n      const granted = await PermissionsAndroid.request(\n        PermissionsAndroid.PERMISSIONS.CAMERA,\n        {\n          'title': 'Cool Photo App Camera Permission',\n          'message': 'Cool Photo App needs access to your camera ' +\n          'so you can take awesome pictures.'\n        }\n      )\n      if (granted === PermissionsAndroid.RESULTS.GRANTED) {\n        console.log(\"Camera permission accepted\")\n      } else {\n        console.log(\"Camera permission denied\")\n      }\n    } catch (err) {\n      console.warn(err)\n    }\n  }\n  ```\n\n### Options\n\n\n\n| Option | iOS    | Android | Description | Default | Options | Type\n|:------:|:------:|:-------:|:----:|:-------------:|:--------:|:----:|\n| `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}**\n| `groupTypes` | YES | NO | Specifies which group types to filter the results to | ***SavedPhotos*** | *All*, *Album*, *Event*, *Faces*, *Library*, *PhotoStream*, *SavedPhotos* | **{string}**\n| `assetType` | YES | YES | Specifies filter on assets | ***Photos*** | *All*, *Photos*, *Videos* | **{string}**\n| `selectSingleItem` | YES | YES | If `true` only one item can be selected | ***false*** | *true*, *false* | **{boolean}**\n| `emptyGalleryText` | YES | YES | Specifies the text to display if there are no images or videos | ***There are no photos or video*** | - | **{string}**\n| `maximumSelectedFiles` | YES | YES | Specifies the number of files that can be selected | ***15*** | - | **{integer}**\n| `selected` | YES | YES | Specifies the array with selected files that are retuned from callback in your component | ***[]***  | - | **{array}**\n| `itemsPerRow` | YES | YES | Specifies the number of items on one row | ***3***  | - | **{integer}**\n| `imageMargin` | YES | YES | Specifies margins of the image | ***5***  | - | **{integer}**\n| `customLoader` | YES | YES | Specifies custom component with loading indicator | ***\u003cActivityIndicator/\u003e***  | - | **{component}**\n| `customSelectMarker` | YES | YES | Specifies custom component with select marker | ***\u003cImage/\u003e***  | - | **{component}**\n| `markIcon` | YES | YES | Specifies custom icon for default marker | - | - | **{image}**\n\n### Methods\n| Method | Description | Type\n|:------:|:-----------:|:----:|\n| `callback` | Callback with selected files and current selected file | ***{function}***\n\n### Example\n\n```javascript\nimport React, { Component } from 'react';\nimport { StyleSheet, ActivityIndicator, View, Image, PermissionsAndroid } from 'react-native';\n\nimport GalleryMediaPicker from 'react-native-gallery-media-picker'\nconst marker = require('./check.png');\n\nexport default class App extends Component {\n  constructor(props){\n    super(props);\n    this.state = {\n      totalFiles: 0,\n      selected: [],\n      hasPermission: false\n    }\n  }\n\n\n  async requestCameraPermission() {\n    try {\n      const granted = await PermissionsAndroid.request(\n        PermissionsAndroid.PERMISSIONS.CAMERA,\n        {\n          'title': 'Cool Photo App Camera Permission',\n          'message': 'Cool Photo App needs access to your camera ' +\n          'so you can take awesome pictures.'\n        }\n      )\n      if (granted === PermissionsAndroid.RESULTS.GRANTED) {\n        this.setState({hasPermission: true })\n      } else {\n        console.log(\"Camera permission denied\")\n      }\n    } catch (err) {\n      console.warn(err)\n    }\n  }\n\n  componentWillMount(){\n    this.requestCameraPermission();\n  }\n\n  getSelectedFiles(files, current) {\n    this.setState({ totalFiles: files.length, selected: files });\n    console.log('Current: ',current);\n    console.log(this.state.selected);\n  }\n\n  /**\n  * @description Render custom loader that shows when files are fetching\n  */\n  renderLoader(){\n    return(\n      \u003cActivityIndicator color=\"red\" size=\"large\"/\u003e\n    )\n  }\n\n  /**\n  * @description Render custom marker\n  * This will cancel the \"markIcon\" option\n  */\n  renderSelectMarker(){\n    return(\n    \u003cView style={styles.markerWrapper}\u003e\n      \u003cImage source={marker} style={styles.marker}/\u003e\n    \u003c/View\u003e\n    )\n  }\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        {this.state. hasPermission \u0026\u0026 \u003cGalleryMediaPicker\n          groupTypes='All'\n          assetType='All'\n          markIcon={marker}\n          customSelectMarker={this.renderSelectMarker()}\n          batchSize={1}\n          emptyGalleryText={'There are no photos or video'}\n          maximumSelectedFiles={3}\n          selected={this.state.selected}\n          itemsPerRow={3}\n          imageMargin={3}\n          customLoader={this.renderLoader()}\n          callback={this.getSelectedFiles.bind(this)} /\u003e}\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1\n  },\n  marker:{\n    width: 30,\n    height: 30,\n    zIndex: 2445,\n    top: 5,\n    right: 5,\n    backgroundColor: 'transparent',\n  },\n  markerWrapper: {\n    position: 'absolute',\n    flex:1,\n    top: 0 ,\n    zIndex: 2445,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    alignItems: 'center',\n    justifyContent: 'center'\n  }\n});\n\n```\n\n# Todos\n\n - add more options\n - add filter buttons\n - add overlay with total video duration for video files\n - add more customization\n - add an \"All\" album\n - add the possibility to disable categorization by date\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faround25%2Freact-native-gallery-media-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faround25%2Freact-native-gallery-media-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faround25%2Freact-native-gallery-media-picker/lists"}