Fully customizable Masonry layout for react-native.
1. Add this to packgage.json of your project
$ "the-better-masonry":"git+https://github.com/shubham56/the-better-masonry.git"
2. Run the following command in your project directory
$ npm install
3. How to use
import Masonry from "the-better-masonry";
PROPS,
| Name | Type | Default | Description |
|---|---|---|---|
| data | array | [] | Input Data |
| renderItem | React Component | null | React Component to render the item |
| noOfColumns | number | 1 | No of columns in Masonry |
| onEndReached | function | ()=>{} | Called when list reaches the end of layout. Can be used to repopulate data or load more. |
| setOffset | function | ()=>{} | returns the vertical scroll offset of the Masonry |
| style | style object | {} | Styling for the entire Masonry |
<Masonry
setOffset={y => (this.offsetY = y)}
style={{ backgroundColor: this.state.backgroundColor }}
noOfColumns={3}
data={['Apple','Mango','Guava','Pineapple','Raisins','Grapes','Pomegranate']}
renderItem={(item) => (<Text>{item}</Text>)}
/>Note: always use odd number of items in the data array