🧱 React Native Masonry ScrollView
Simple easy to use Masonry ScrollView for React Native that extends the original ScrollView ✨
[![Version][version-badge]][package]
[![Downloads][downloads-badge]][npmtrends]
[![Star on GitHub][github-star-badge]][github-star]
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Twitter Follow][twitter-badge]][twitter]
## Installation
```sh
yarn add react-native-masonry-scrollview
# or
npm i react-native-masonry-scrollview
```
## Usage
The Masonry ScrollView splits the content of the `ScrollView` into multiple columns or rows (depending on horizontal or vertical scroll) and renders the items into the individual column's `View` component. This component is built to extend the existing `ScrollView` component hence all the properties of the `ScrollView` will work with it and it can render any component supplied to it as children.
```jsx
import React from "react";
import { View, StyleSheet } from "react-native";
import RNMasonryScroll from "react-native-masonry-scrollview";
const Box = () => ;
const App = () => (
{/**
* Masonry ScrollView only expects children as a list
*/}
{[
,
,
,
,
,
]}
);
const styles = StyleSheet.create({
box: {
height: 50,
width: 50,
backgroundColor: "red",
margin: 16
}
});
export default App;
```
## Advanced Usage
Refer the example expo app in `RNMasonryExample/` directory of this repo 👍
## Properties
### `children: ReactNode[]`
Children of the Masonry ScrollView component should always be an array of React Nodes.
---
### `columns?: number`
Number of columns to split the Masonry
---
### `columnStyle?: StyleProp`
Style applied to the `View` component that is wrapping your components inside the Masonry ScrollView.
---
### `oddColumnStyle?: StyleProp`
Style applied only to the n-th odd columns of the Masonry ScrollView. If you have 3 columns, this style will be applied to columns 1 & 3.
---
### `evenColumnStyle?: StyleProp`
Style applied only to the n-th even columns of the Masonry ScrollView. If you have 3 columns, this style will be applied to column 2.
---
### `horizontal?: boolean`
Control if the masonry is horizontal or vertical
---
### ScrollViewProps
All the existing ScrollView Props are supported by this component since it simply extends the actual ScrollView.
---
## Example App
The example app is built with expo, you can run the app following the official [expo docs](https://expo.io/learn).
From the Example App
## Licenses
MIT © [DaniAkash][twitter]
[downloads-badge]: https://img.shields.io/npm/dm/react-native-masonry-scrollview.svg?style=flat-square
[npmtrends]: http://www.npmtrends.com/react-native-masonry-scrollview
[package]: https://www.npmjs.com/package/react-native-masonry-scrollview
[version-badge]: https://img.shields.io/npm/v/react-native-masonry-scrollview.svg?style=flat-square
[twitter]: https://twitter.com/dani_akash_
[twitter-badge]: https://img.shields.io/twitter/follow/dani_akash_?style=social
[github-watch-badge]: https://img.shields.io/github/watchers/DaniAkash/react-native-masonry-scrollview.svg?style=social
[github-watch]: https://github.com/DaniAkash/react-native-masonry-scrollview/watchers
[github-star-badge]: https://img.shields.io/github/stars/DaniAkash/react-native-masonry-scrollview.svg?style=social
[github-star]: https://github.com/DaniAkash/react-native-masonry-scrollview/stargazers