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 (the author).

Check out the docs 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.

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

:open_file_folder: Index

1. Install

2. Usage Example

3. API

4. :books: Props

5. Example Project

6. Author

7. Contribute

8. License

:gem: Install

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

1$ npm install --save react-native-image-layout

or

1$ 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, please be sure to give it a star at GitHub. Thanks.

1import ImageLayout from "react-native-image-layout";
2
3//...
4render() {
5    return (
6        <ImageLayout
7            images={[
8                // Version *3.0.0 update (or greater versions): 
9                // Can be used with different image object fieldnames.
10                // Ex. source, source.uri, uri, URI, url, URL
11                { uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg" },
12                // IMPORTANT: It is REQUIRED for LOCAL IMAGES
13                // to include a dimensions field with the
14                // actual width and height of the image or
15                // it will throw an error.
16                // { source: require("yourApp/image.png"),
17                //     dimensions: { width: 1080, height: 1920 }
18                // },
19                // "width" & "height" is an alternative to the dimensions
20                // field that will also be acceptable.
21                // { source: require("yourApp/image.png"),
22                //     width: 1080,
23                //     height: 1920 },
24                { source: { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-women-beauty-40901.jpg" } },
25                { uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg",
26                    // Optional: Adding a dimensions field with
27                    // the actual width and height for REMOTE IMAGES
28                    // will help improve performance.
29                    dimensions: { width: 1080, height: 1920 } },
30                { URI: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg",
31                    // Version *2.0.0 update (or greater versions):
32                    // Optional: Does not require an id for each
33                    // image object, but is for best practices and
34                    // can be better for performance with the API.
35                    id: "blpccx4cn" },
36                { url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
37                { URL: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" },
38            ]}
39            // Version *5.7.0 update
40            // onEndReached={() => {
41            //     // add more images when scroll reaches end
42            // }}
43        />
44    );
45}
46//...

Android Note: Remote debugger should be turned off on Android.

:tada: Efficiently Add More Images

Version *5.2.0 update: Without rerendering the images.

1import ImageLayout from "react-native-image-layout";
2
3//...
4/**
5 * Example method to add more images.
6 *
7 * @method addMoreImages
8 */
9addMoreImages(newImages) {
10    this.setState({
11        images: this.state.images.concat(newImages)
12    });
13}
14
15render() {
16    return (
17        <ImageLayout
18            images={this.state.images}
19            {/* Version *5.7.0 update */}
20            onEndReached={() => {
21                this.addMoreImages(moreImages);
22            }}
23        />
24    );
25}
26//...

:tada: Add New Images

Version *5.2.0 update: Rerendering the images.

1import ImageLayout from "react-native-image-layout";
2
3//...
4/**
5 * Example method to add new images.
6 *
7 * @method addNewImages
8 * @config Set react-native-image-layout's "rerender" prop to true.
9 */
10addNewImages(newImages) {
11    this.setState({
12        images: newImages
13    });
14}
15
16render() {
17    return (
18        <ImageLayout
19            rerender={true}
20            images={this.state.images}
21        />
22    );
23}
24//...

:nut_and_bolt: API

<ImageLayout /> 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 <ImageLayout />

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

:small_blue_diamond: Gallery Props of <ImageLayout />

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

:clapper: Example Project

Perform steps 1-2 to run locally:

1$ git clone https://github.com/Luehang/react-native-image-layout.git react-native-image-layout

1$ cd react-native-image-layout/example/

1. check out the code
2. npm install
3. npm run ios

1. check out the code
2. npm install
3. emulator running in separate terminal
4. npm run android

:santa: Author

Free and made possible along with costly maintenance and updates by Lue Hang (the author).

:clap: Contribute

Pull requests are welcomed.

:tophat: Contributors

Contributors will be posted here.

:baby: Beginners

Not sure where to start, or a beginner? Take a look at the issues page.

:page_facing_up: License

MIT © Lue Hang, as found in the LICENSE file.