Rn-masonry-list NPM

Features

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

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.