An easy and simple to use React Native component to render a custom masonry layout for remote/local images and displayed on a custom interactive image viewer. Includes animations and support for both iOS and Android. Free and made possible along with costly maintenance and updates by [Lue Hang](https://www.facebook.com/lue.hang) (the author).
Check out the [docs](https://luehangs.site/lue_hang/projects/react-native-image-layout) for a complete documentation.
- Supports **large lists** rendering.
- Efficiently add more images without re-rendering.
- Smart algorithm for eveningly laying out images.
- Swipe up and down to close images.
- Can be use with many fieldnames. `source`, `source.uri`, `uri`, `URI`, `url` or `URL`.
- Support for rendering all local and remote images with no missing images.
- Support for dynamic device rotation.
- Includes guestures and important event listeners for pan, pinch, single tap and double tap.
- Includes zoom mode.
- Pull to Refresh.
- Scroll loading.
- Easily customizable.
- Intelligent scroll 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](https://www.luehangs.site).
Built with [`react-native-gallery-swiper`](https://npmjs.com/package/react-native-gallery-swiper) & [`react-native-smart-gallery`](https://npmjs.com/package/react-native-smart-gallery).
## :gem: Install
Type in the following to the command line to install the dependency.
```bash
$ npm install --save react-native-image-layout
```
or
```bash
$ yarn add react-native-image-layout
```
---
## :tada: Usage Example
Add an ``import`` to the top of the file. At minimal, declare the ``ImageLayout`` component in the ``render()`` method providing an array of data for the ``images`` prop.
> If you like [`react-native-image-layout`](https://github.com/Luehang/react-native-image-layout), please be sure to give it a star at [GitHub](https://github.com/Luehang/react-native-image-layout). Thanks.
```javascript
import ImageLayout from "react-native-image-layout";
//...
render() {
return (
{
// // add more images when scroll reaches end
// }}
/>
);
}
//...
```
Android Note: Remote debugger should be turned off on Android.
***
## :tada: Efficiently Add More Images
**Version \*5.2.0 update:** Without rerendering the images.
```javascript
import ImageLayout from "react-native-image-layout";
//...
/**
* Example method to add more images.
*
* @method addMoreImages
*/
addMoreImages(newImages) {
this.setState({
images: this.state.images.concat(newImages)
});
}
render() {
return (
{
this.addMoreImages(moreImages);
}}
/>
);
}
//...
```
***
## :tada: Add New Images
**Version \*5.2.0 update:** Rerendering the images.
```javascript
import ImageLayout from "react-native-image-layout";
//...
/**
* Example method to add new images.
*
* @method addNewImages
* @config Set react-native-image-layout's "rerender" prop to true.
*/
addNewImages(newImages) {
this.setState({
images: newImages
});
}
render() {
return (
);
}
//...
```
## :nut_and_bolt: API
```` component accepts the following props...
# :books: Props
:information_source: **Version *2.0.0 update (or greater versions):** Props changes that may not be compatible with lower versions.
## :small_blue_diamond: Image Layout Props of ````
> If you like [`react-native-image-layout`](https://github.com/Luehang/react-native-image-layout), please be sure to give it a star at [GitHub](https://github.com/Luehang/react-native-image-layout). Thanks.
| Props | Description | Type | Default |
| ----- | ----------- | ---- | ------- |
| `images` | An array of objects. `uri` is a required field. EX. `[{uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg"}, {uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg"}]` | `Array` | Required |
| `columns` | Desired number of columns. | `number` | 2 |
| `initialColToRender` | How many columns to render in the initial batch. | `number` | `columns` |
| `initialNumInColsToRender` | How many items to render in each column in the initial batch. | `number` | 1 |
| `spacing` | Gutter size of the column. The spacing is a multiplier of 1% of the available view. | `number` | 1 |
| `sorted` | Whether to sort the masonry data according to their index position or allow to fill in as soon as the `uri` is ready. | `Boolean` | false |
| `rerender` | Rerender the images when it changes. **Version \*5.2.0 update** | `boolean` | false |
| `onLongPressImage` | Executed after a long press on an item on the masonry. `({item: object, index: number}) => void` **Version \*3.0.0 update**. | `Function` | |
| `imageContainerStyle` | The styles object which is added to the Image component. | `object` | {} |
| `renderIndividualMasonryHeader` | Custom function that is executed **ABOVE** each individual masonry image. `(item: object, index: number) => ?React.Element` | `Function` | |
| `renderIndividualMasonryFooter` | Custom function that is executed **BELOW** each individual masonry image. `(item: object, index: number) => ?React.Element` | `Function` | |
| `renderMainHeader` | Custom function to render a header above the MasonryList. `() => void` | `Function` | |
| `renderMainFooter` | Custom function to render a footer below the MasonryList. `() => void` | `Function` | |
| `masonryFlatListColProps` | Props to be passed to the underlying `FlatList` masonry. See [`FlatList` props...](https://facebook.github.io/react-native/docs/flatlist#props) | `object` | {} |
| `onEndReached` | Called once when the scroll position gets within `onEndReachedThreshold` of the rendered content. `() => void` **Version \*5.7.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 \*5.7.0 update** | `number` | 0.8 |
## :small_blue_diamond: Gallery Props of ````
> If you like [`react-native-image-layout`](https://github.com/Luehang/react-native-image-layout), please be sure to give it a star at [GitHub](https://github.com/Luehang/react-native-image-layout). Thanks.
| Props | Description | Type | Default |
| ----- | ----------- | ---- | ------- |
| `imagePageComponent` | Custom function to render the images for gallery. `(imageProps: { imageLoaded: Boolean, source: object, image: object, style: Array
