Skip to content

st0ffern/react-native-mediapicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-mediapicker version npm dependencies Commitizen friendly npm

Greenkeeper badge

Media Picker for React Native

Props

  • callback: required Callback function when images was selected.
  • groupTypes: The group where the photos will be fetched, one of 'Album', 'All', 'Event', 'Faces', 'Library', 'PhotoStream' and 'SavedPhotos'. (Default: SavedPhotos)
  • assetType: The asset type, one of 'Photos', 'Videos' or 'All'. (Default: Photos)
  • maximum: Maximum number of selected images. (Default: 15)
  • imagesPerRow: Number of images per row. (Default: 3)
  • imageMargin: Margin size of one image. (Default: 5)
  • selectedMarker: Custom selected image marker component. (Default: checkmark).
  • backgroundColor: Set background color. (Default: white).
  • selected: set preselected items (Default: none ).
  • showLoading: show loading spinners before image will show? (Default: true ).

Installation

npm i -S react-native-mediapicker

or

yarn add react-native-mediapicker

Link Native Modules (IOS)

In XCode, you need to add a link to RCTCameraRoll. You will find more information in the react-native docs

Add Purpose String (IOS)

For IOS10 you need to add a “Privacy - Photo Library Usage Description”-key to Info.plist. For more information, see this blog

Usage Examples

import MediaPicker from "react-native-mediapicker"
<MediaPicker
  callback={items => this.whenClicked(items)}
  groupTypes="SavedPhotos"
  assetType="Photos"
  maximum={1}
  imagesPerRow={3}
  imageMargin={5}
  showLoading={true}
  backgroundColor="black"
  selectedMarker={
    <Image
      style={[styles.checkIcon, {width: 25, height: 25, right: this.props.imageMargin + 5},]}
      source={require('./checkmark.png')}
    />
  } />