React Native Masonry Image View

3 min readMar 1, 2019

In this article, I will explain about Masonry Image view using React Native.

What is Masonry?

Masonry is the building of structures from individual units, which are often laid in and bound together by mortar; the term masonry can also refer to the units themselves — by wikipedia.

Then come to Masonry Image view.

The picture is the example of the masonry image format.

In our react native application how we show our images in the Masonry format.

In this article, I will explain about two approaches according to my understanding. One is Manual and another one is using a plugin.

Manually Create Masonry Image format

How we are going to create a manually Image view format is, Just using our own styles and view.

<View aspectRatio={1}>
 <View style={{ flexDirection: "row" }}>
 <Thumbnail
  square
  style={{ flex: 1, height: 150 }}
  source={{uri:"http://edibleapple.com/wp-    content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"
}}
 />
 <Thumbnail
  square
  style={{ flex: 2 }}
  source={{uri:"http://edibleapple.com/wp-  content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}}
/>
</View>
 <View style={{ flexDirection: "row" }}>
  <Thumbnail
   square
   style={{ flex: 2 }}
   source={{uri:"http://edibleapple.com/wp-  content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}}
/>
 <Thumbnail
  square
  style={{ flex: 3 }}
  source={{uri:"http://edibleapple.com/wp- content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"
}}
/>
</View>

Using the above code we can show the images Masnory format. But it does not work when you pass images dynamically.

Using a Plugin.

I used this plugin for showing dynamic images in Masnory format.

$ npm install --save react-native-masonry-list
OR
$ yarn add react-native-masonry-list

Import this file.

import MasonryList from "react-native-masonry-list";

Call the import

<MasonryList sorted onPressImage={this.onPressImage} images={data} />

Full view of code:

import React, { Component } from "react";
import MasonryList from "react-native-masonry-list";
import data from "./data";export default class App extends Component<Props> {
  onPressImage = value => {
    console.warn(value);
  };
  render() {
    return (
      <MasonryList sorted onPressImage={this.onPressImage} images={data} />
    );
  }
}

In the above code, I passed the data. Don’t worry about the data file I will give below.

//data.js
const data = [
  {
    uri:
      "https://stimg.cardekho.com/images/carexteriorimages/360x240/Ferrari/Ferrari-Portofino/047.jpg"
  },{
    uri: "https://rollr.io/wp-content/uploads/2017/02/mini-home-car.jpg"
  },{
    uri:
      "https://www.bmw-speedmotorwagen.in/sites/default/files/styles/nostyle/public/slider_banner_image/2018-02/M4Coupe-Header_Banner_17.jpg?itok=zmJWURhi"
  },{
    url:
      "https://img.etimg.com/thumb/msid-67103187,width-1200,height-900,resizemode-4,imgsize-96644/car-getty.jpg"
  },
  {
    uri:
      "https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/vdat/submodels/dodge_challenger_dodge-challenger_2019-1545059179866.jpg"
  }
];
export default data;