Git Product home page Git Product logo

react-native-camera-roll-picker's Introduction

version npm

react-native-camera-roll-picker

CameraRoll Picker component for React native

##Add to Project

  • Make sure node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj has been imported to project libraries by following the libraries linking instructions.

  • Install component through npm

$ npm install react-native-camera-roll-picker --save
  • Require component
import CameraRollPicker from 'react-native-camera-roll-picker';

##Basic Usage

<CameraRollPicker
  callback={this.getSelectedImages} />

##Props

  • callback : Callback function when images was selected. (is required!). Return a selected image array and current selected image.
  • scrollRenderAheadDistance : "How early to start rendering rows before they come on screen, in pixels." (Default: 500)
  • initialListSize : Specifies how many rows we want to render on our first render pass. (Default: 1)
  • pageSize : After the initial render where 'initialListSize' is used, ListView looks at the pageSize to determine how many rows to render per frame. (Default: 3)
  • removeClippedSubViews : "When true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true." (The default value is false before version 0.14-rc). (Default: true)
  • 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)
  • selected : Already be selected images array. (Default: [])
  • maximum : Maximum number of selected images. (Default: 15)
  • imagesPerRow : Number of images per row. (Default: 3)
  • imageMargin : Margin size of one image. (Default: 5)
  • containerWidth : Width of camer roll picker container. (Default: device width)
  • selectedMarker : Custom selected image marker component. (Default: checkmark).
  • backgroundColor : Set background color. (Default: white).
  • emptyText: Text to display instead of a list when there are no photos found. (Default: 'No photos.')
  • emptyTextStyle: Styles to apply to the emptyText. (Default: textAlign: 'center')

##Run Example

$ git clone https://github.com/jeanpan/react-native-camera-roll-picker.git
$ cd react-native-camera-roll-picker
$ cd Example
$ npm install
$ react-native run-ios

react-native-camera-roll-picker's People

Contributors

brouding avatar cooperka avatar faridsafi avatar haroenv avatar jeanpan avatar juliusbuckley avatar sibelius avatar st0ffern avatar superandrew213 avatar timzaak avatar vaukalak avatar wootwoot1234 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.