An easy and simple to use React Native component to render a custom high performant masonry layout for images. It uses a smart algorithm to sort the images evenly as possible according to the index position or fill in as soon as the image is fetched. Includes 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.

• Dynamic images, columns, spacing and container width.
• Smart algorithm for eveningly laying out images.
• Pull to Refresh.
• Scroll loading.
• Can be use with deeply rooted data and 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.
• Easily and highly customizable.
• Fully supports iOS and PARTIALLY SUPPORTS ANDROID ONLY.

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

:open_file_folder: Index

1. Install

2. Usage Example

3. API

4. :books: Props

5. Helpful Hints

6. Example Project

7. Author

8. Contribute

9. License

:gem: Install

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

1$ npm install --save react-native-masonry-list

or

1$ yarn add react-native-masonry-list

:tada: Usage Example

Add an import to the top of the file. At minimal, declare the MasonryList component in the render() method providing an array of data for the images prop.

:information_source: Local images must have a defined dimensions field with width and height.

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

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

:tada: Efficiently Add More Images

Version *2.12.0 update: Without rerendering the images.

1import MasonryList from "react-native-masonry-list";
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        <MasonryList
18            images={this.state.images}
19            {/* Version *2.14.0 update */}
20            onEndReached={() => {
21                this.addMoreImages(moreImages);
22            }}
23        />
24    );
25}
26//...

:tada: Add New Images

Version *2.13.0 update: Rerendering the images.

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

:nut_and_bolt: API

<MasonryList /> component accepts the following props...

:books: Props

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

:memo: Helpful Hints

:information_source: Version *2.1.0 update (or greater versions): itemSource prop

Below is an example implementation of the itemSource prop.

1import MasonryList from "react-native-masonry-list";
2
3//...
4render() {
5    return (
6        <MasonryList
7            itemSource={["node", "image"]}
8            images={[
9                {
10                    node: {
11                        image: { uri: "https://luehangs.site/pic-chat-app-images/beautiful-blond-blonde-hair-478544.jpg" }
12                    }
13                },
14                {
15                    node: {
16                        image: { source: require("yourApp/image.png"), dimensions: { width: 1080, height: 1920 } }
17                    }
18                },
19                {
20                    node: {
21                        image: { source: require("yourApp/image.png"),
22                            width: 1080,
23                            height: 1920 }
24                    }
25                },
26                {
27                    node: {
28                        image: { source: { uri: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-women-beauty-40901.jpg" } }
29                    }
30                },
31                {
32                    node: {
33                        image: { uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg",
34                            dimensions: { width: 1080, height: 1920 } }
35                    }
36                },
37                {
38                    node: {
39                        image: { URI: "https://luehangs.site/pic-chat-app-images/beautiful-blond-fishnet-stockings-48134.jpg"
40                            id: "blpccx4cn" }
41                    }
42                },
43                {
44                    node: {
45                        image: { url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" }
46                    }
47                },
48                {
49                    node: {
50                        image: { URL: "https://luehangs.site/pic-chat-app-images/attractive-balance-beautiful-186263.jpg" }
51                    }
52                }
53            ]}
54        />
55    );
56}
57//...

:clapper: Example Project

Perform steps 1-2 to run locally:

1$ git clone https://github.com/Luehang/react-native-masonry-list.git react-native-masonry-list

1$ cd react-native-masonry-list/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.