An easy and simple to use React Native component to render a custom layout for CameraRoll
photos (next update will have videos) and displayed on a custom interactive image viewer for manipulation. Includes animations and support for both iOS and Android. Free and made possible along with costly maintenance and updates by Lue Hang (the author).

Check out the docs for a complete documentation.

- Choose a custom way to get images or use default CameraRoll getter.
- Optimized for large list rendering of images.
- Swipe up and down to close images.
- Pull to Refresh.
- Scroll loading.
- Support for dynamic device rotation.
- Easily and highly customizable.
- Includes guestures and important event listeners for pan, pinch, single tap and double tap.
- Includes zoom mode.
- Intelligent scrolling detection to cushion rough swipe guestures.
- Supports iOS and Android.

---

#### :information_source: Learn more about React Native with project examples along with Cyber Security and Ethical Hacking at LueHsoft.

Built with react-native-gallery-swiper & react-native-smart-gallery.

---

:open_file_folder: Index

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

---

:gem: Getting Started

Type in the following to the command line to install the dependency.

``bash
$ npm install --save react-native-camera-roll-gallery
`

or

`bash
$ yarn add react-native-camera-roll-gallery
`

:tada: Example Usage Customization

Version \*4.0.0 update

> If you like react-native-camera-roll-gallery, please be sure to give it a star at GitHub. Thanks.

`javascript
import CameraRollGallery from "react-native-camera-roll-gallery";

//...
render() {
return (
enableCameraRoll={false} // default true
// Get data logic goes here.
// This will get trigger initially
// and when it reached the end
// if there is more.
onGetData={(fetchParams, resolve) => {
resolve({
assets: [
// Can be used with different image object fieldnames.
// Ex. source, source.uri, uri, URI, url, URL
{ uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg" },
// { source: require("yourApp/image.png"),
// // IMPORTANT: It is REQUIRED for LOCAL IMAGES
// // to include a dimensions field with the
// // actual width and height of the image or
// // it will throw an error.
// dimensions: { width: 1080, height: 1920 } },
{ source: { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-women-beauty-40901.jpg" } },
{ uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg" },
{ URI: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg" },
{ url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
{ URL: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" },
],
pageInfo: {
hasNextPage: false
}
});
}}
/>
);
}
//...
`

---







:tada: Example Usage With Provided CameraRoll

:information_source: Additional installation is required to install additional package and link binaries. Follow the Installation section.

> If you like react-native-camera-roll-gallery, please be sure to give it a star at GitHub. Thanks.

`javascript
import CameraRollGallery from "react-native-camera-roll-gallery";

//...
render() {
return (

);
}
//...
`

:nut_and_bolt: API

component accepts the following props...

:books: Props

$3

> If you like react-native-image-layout, please be sure to give it a star at GitHub. Thanks.

| Props | Description | Type | Default |
| ----- | ----------- | ---- | ------- |
| enableCameraRoll | Enable the provide default CameraRoll. Version \*3.0.0 update | boolean | true |
| onGetData | Custom function to render provided images from initial to when reaching the end. "Get" data logic should go here. (fetchParams: { previousCount: number, itemCount: number, groupTypes: string, assetType: string }, resolve: Function) => { assets: object, pageInfo: { hasNextPage: boolean } } Find an example at the example section. Version \*4.0.0 update | Function | |
| imagesPerRow | Number of images per row. | number | 3 |
| imageMargin | Margin size of one image. | number | 5 |
| containerWidth | Width of Camera Roll layout container. | number | device width |
| initialNumToRender | Specifies how many items we want to render on our first render pass for the Camera Roll layout. | number | 6 |
| itemCount | The number of item to fetch and render. Version \*3.0.0 update | number | 100 |
| groupTypes | The group where the photos will be fetched, one of "Album", "All", "Event", "Faces", "Library", "PhotoStream" and "SavedPhotos". | string | "All" |
| assetType | The asset type, one of "Photos", "Videos" or "All". | string | "Photos" |
| 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. | boolean | true |
| backgroundColor | Set background color of Camera Roll layout. | string | "white" |
| emptyText | Text to display instead of a list when there are no photos found. | string | "No photos." |
| emptyTextStyle | Styles to apply to the emptyText. | object | {textAlign: "center"} |
| loader | Camera Roll loader component node. | React.Component | |
| loaderColor | The foreground color of the initial load spinner. | string | "lightblue" |
| cameraRollFlatListProps | Props to be passed to the underlying FlatList Camera Roll layout. See FlatList props... | object | |
| cameraRollListHeader | Custom function to render the Camera Roll list header. () => React.Element | Function | |
| cameraRollListFooter | Custom function to render the Camera Roll list footer. () => React.Element | Function | |
| imageContainerStyle | The styles object which is added to the Image component. | object | {} |
| renderIndividualHeader | Custom function that is executed ABOVE each individual image. (item: object, index: number, onClose: Function) => ?React.Element | Function | |
| renderIndividualFooter | Custom function that is executed BELOW each individual image. (item: object, index: number, onClose: Function) => ?React.Element | Function | |
| onEndReached | Called once when the scroll position gets within onEndReachedThreshold of the rendered content. () => void Version \*4.1.0 update | function | |
| onEndReachedThreshold | How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list. Version \*4.1.0 update | number | 0.8 |
| keyExtractor | Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then falls back to using the index, like React does. Version \*4.2.0 update | Function | 0.8 |

---







$3

Inorder to use these props, make sure enableCameraRoll prop is set to true.

| Props | Description | Type | Default |
| ----- | ----------- | ---- | ------- |
| catchGetPhotosError | Custom function to catch errors from getting and loading images. (error) => void Version \*3.0.0 update | Function | |
| permissionDialogTitle | Starting on android M individual permissions must be granted for certain services, having access to the camera roll is one of them, you can use this to change the title of the dialog prompt requesting permissions. | string | "Read Storage Permission" |
| permissionDialogMessage | Starting on android M individual permissions must be granted for certain services, having access to the camera roll is one of them, you can use this to change the content of the dialog prompt requesting permissions. | string | "Needs access to your photos so you can use these awesome services." |
| pendingAuthorizedView | Starting on android M individual permissions must be granted for certain services, having access to the camera roll is one of them. This will be displayed when access to the camera roll has been denied. | React.Element | Defaults to Waiting on access permission to camera roll. message. |
| notAuthorizedView | Starting on android M individual permissions must be granted for certain services, having access to the camera roll is one of them. This will be displayed when access to the camera roll has been denied completely. | React.Element | Defaults to Access denied to camera roll. message. |

$3

> If you like react-native-image-layout, please be sure to give it a star at GitHub. Thanks.

| Props | Description | Type | Default |
| ----- | ----------- | ---- | ------- |
| imagePageComponent | Custom function to render the images for gallery. First param is the image props and second param is the dimensions. (imageProps: { imageLoaded: boolean, source: object, image: object, style: Array