rn-masonry-list

React Native Masonry

Features

• Dynamic Column Rendering
• Device Rotation
• On-press Handlers
• Custom Headers & Captions
• Optimized to Rendering Large List
• Automatic Sizing Based on Available Space

Table of Contents

1. Installation
2. Usage
3. Props
4. Credits
5. License

installation

yarn add rn-masonry-list
# or 
npm install rn-masonry-list

Also, you need to install react-native-fast-image and follow theirs installation instructions.

Usage

    import Masonry from 'rn-masonry-list';

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

Props

name	required	type	default	description
data	YES	DataType		List data for masonry. Check DataType interface
columns	NO	number	2	Desired number of columns
space	NO	number	2	Spacing each column
onEndReach	NO	function	undefined	Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
canRefresh	NO	bool	false	Enable/Disable RefreshControl.
onRefresh	NO	function	undefined	Called when the view starts refreshing.
refreshing	NO	function	undefined	Whether the view should be indicating an active refresh.
refreshColor	NO	function	undefined	The colors (at least one) that will be used to draw the refresh indicator.
customRenderItem	NO	function	undefined	Function return React.Element with param DataPassPram.
onPress	NO	function	undefined	Function when you press an image. Param: DataPassPram.
renderHeader	NO	function	undefined	Function return React.Element with param DataPassPram to render Header Image.
renderFooter	NO	function	undefined	Function return React.Element with param DataPassPram to render Footer Image.
containerImageStyle	NO	function	undefined	Style for image.

DataType

name	required	Type	default	description
uri	YES	string		The uri of the image location.
data	No	object		Special data if you want to pass when press, render, render Header, render Footer.

DataPassPram

name	Type	description
uri	string	The uri of the image location.
data	object	Special data if you want to pass when press, render, render Header, render Footer.
actualSize	Dimensions	Size image get from remote.
column	number	Current column of image.
width	number	Width image after handle.
height	number	Height image after handle.

Dimensions

name	Type	description
width	number	Width of image.
height	number	Height of image.

Built With

• react-native-fast-image
• react-fast-compare

License

MIT