react-native-masonry

🙌 An easy to use, pure JS react-native component to render a masonry~ish layout for remote images

react-native-masonry is built with the following features and functionalities baked in 🍰:

• Dynamic Column Rendering
• Progressive Item Loading
• Device Rotation
• On-press Handlers
• Custom Headers & Captions
• Optimized to Rendering Large List
• Support for Third-Party Image components
• Automatic Sizing Based on Available Space

Usage

1. Install the repository

   $ npm install --save react-native-masonry
   

2. Add an import to the top of your file

   import Masonry from 'react-native-masonry';
   

3. At a minimal, declare the component in the render method prividing data for bricks

   <Masonry
     sorted // optional - Default: false
     columns={4} // optional - Default: 2
     bricks={[
       { uri: 'http://image1.jpg' },
       { uri: 'http://image2.jpg' },
       { uri: 'http://image3.jpg' }
     ]}
   />
   

4. Still a bit confused 😖, or want to see it in action? No worries, run the example application on your local machine to examine how to get started or try it out on Expo.io.

Component Props

Brick Properties

"Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a uri property at a minimum. However, you can freely add additional properties to the data property if you need access to certain data within your brick.onPress handler and footer/header renderer. The following properties are available.

Usage Examples

ℹ️ Figure 1: Brick with renderHeader

Accomplishing a top bar indicating the user's avatar and name

{
  // User defined data
  data: {
    user: {
        name: 'Henry',
        profilePic: 'https://user.jpeg'
    }
  }
  uri: 'https://example.com/mainImage.jpeg',
  renderHeader: (data) => {
    return (
      <View>
          <Image source={{ uri: data.user.profilePic }} style={{ width: 50, height: 50}}>
          <Text>{data.user.name}</Text>
      </View>
    );
  }
}

ℹ️ Figure 2: Brick with .renderFooter

Creating a bottom bar to include additional metadata

{
  data: {
    caption: 'Summer Recipies'
  },
  uri: 'https://example.com/mainImage.jpeg',
  renderFooter: (data) => {
    return (
        <View>
            <Text>{data.caption}</Text>
        </View>
    );
  }
}

ℹ️ Figure 3: Using Third-Party Image Components

How to leverage third-party components like <FastImage> and apply unique properties across all images

import FastImage from 'react-native-fast-image';

const fastProps = {
    onProgress: { e => console.log(e.nativeEvent.loaded / e.nativeEvent.total) },
    resizeMode: FastImage.resizeMode.contain
};

// ... Where Masonry is called
<Masonry
    bricks={data}
    customImageComponent={FastImage}
    customImageProps={fastProps} />

Contribute

👷🏽👷🏻‍♀️🐕

Pull requests are welcomed, just abide by rules listed within contributing.json.

Beginners

Not sure where to start, or a beginner? Take a look at the issues page for low-hanging or beginner-friendly labels as an easy ways to start contributing.

Contributors

Thank you to all the people who have already contributed to react-native-masonry!

License

MIT © Brandon Him