Skip to content
This repository was archived by the owner on Dec 29, 2022. It is now read-only.

Commit ca12ecc

Browse files
committed
added assets & updated readme
1 parent 0d56590 commit ca12ecc

File tree

5 files changed

+151
-0
lines changed

5 files changed

+151
-0
lines changed

README.md

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<h1 align="center">
2+
🧱 React Native Masonry ScrollView
3+
</h1>
4+
5+
<div align="center">
6+
7+
Simple easy to use Masonry ScrollView for React Native that extends the original ScrollView ✨
8+
9+
[![Version][version-badge]][package]
10+
[![Downloads][downloads-badge]][npmtrends]
11+
12+
<!-- [![Build Status][build-badge]][build]
13+
[![Code Coverage][coverage-badge]][coverage] -->
14+
15+
[![Star on GitHub][github-star-badge]][github-star]
16+
[![Watch on GitHub][github-watch-badge]][github-watch]
17+
[![Twitter Follow][twitter-badge]][twitter]
18+
19+
</div>
20+
21+
<p align="center" >
22+
<kbd>
23+
<img src="./assets/vertical.gif" title="Vertical Masonry" float="left">
24+
</kbd>
25+
<kbd>
26+
<img src="./assets/horizontal.gif" title="Horizontal Masonry" float="left">
27+
</kbd>
28+
<br>
29+
<em>From the Example App</em>
30+
</p>
31+
32+
## Installation
33+
34+
```sh
35+
yarn add react-native-masonry-scrollview
36+
37+
# or
38+
39+
npm i react-native-masonry-scrollview
40+
```
41+
42+
## Usage
43+
44+
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.
45+
46+
```jsx
47+
import React from "react";
48+
import { View, StyleSheet } from "react-native";
49+
import RNMasonryScroll from "react-native-masonry-scrollview";
50+
51+
const Box = () => <View style={styles.box} />;
52+
53+
const App = () => (
54+
<RNMasonryScroll>
55+
{/**
56+
* Masonry ScrollView only expects children as a list
57+
*/}
58+
{[
59+
<Box key={0} />,
60+
<Box key={1} />,
61+
<Box key={2} />,
62+
<Box key={3} />,
63+
<Box key={4} />,
64+
<Box key={5} />
65+
]}
66+
</RNMasonryScroll>
67+
);
68+
69+
const styles = StyleSheet.create({
70+
box: {
71+
height: 50,
72+
width: 50,
73+
backgroundColor: "red",
74+
margin: 16
75+
}
76+
});
77+
78+
export default App;
79+
```
80+
81+
## Advanced Usage
82+
83+
Refer the example expo app in `RNMasonryExample/` directory of this repo 👍
84+
85+
## Properties
86+
87+
### `children: ReactNode[]`
88+
89+
Children of the Masonry ScrollView component should always be an array of React Nodes.
90+
91+
---
92+
93+
### `columns?: number`
94+
95+
Number of columns to split the Masonry
96+
97+
---
98+
99+
### `columnStyle?: StyleProp<ViewStyle>`
100+
101+
Style applied to the `View` component that is wrapping your components inside the Masonry ScrollView.
102+
103+
---
104+
105+
### `oddColumnStyle?: StyleProp<ViewStyle>`
106+
107+
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.
108+
109+
---
110+
111+
### `evenColumnStyle?: StyleProp<ViewStyle>`
112+
113+
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.
114+
115+
---
116+
117+
### `horizontal?: boolean`
118+
119+
Control if the masonry is horizontal or vertical
120+
121+
---
122+
123+
### ScrollViewProps
124+
125+
All the existing ScrollView Props are supported by this component since it simply extends the actual ScrollView.
126+
127+
---
128+
129+
## Example App
130+
131+
The example app is built with expo, you can run the app following the official [expo docs](https://expo.io/learn).
132+
133+
## Licenses
134+
135+
MIT © [DaniAkash][twitter]
136+
137+
<!-- [build-badge]:
138+
[build]:
139+
[coverage-badge]:
140+
[coverage]: -->
141+
142+
[downloads-badge]: https://img.shields.io/npm/dm/react-native-masonry-scrollview.svg?style=flat-square
143+
[npmtrends]: http://www.npmtrends.com/react-native-masonry-scrollview
144+
[package]: https://www.npmjs.com/package/react-native-masonry-scrollview
145+
[version-badge]: https://img.shields.io/npm/v/react-native-masonry-scrollview.svg?style=flat-square
146+
[twitter]: https://twitter.com/dani_akash_
147+
[twitter-badge]: https://img.shields.io/twitter/follow/dani_akash_?style=social
148+
[github-watch-badge]: https://img.shields.io/github/watchers/DaniAkash/react-native-masonry-scrollview.svg?style=social
149+
[github-watch]: https://github.com/DaniAkash/react-native-masonry-scrollview/watchers
150+
[github-star-badge]: https://img.shields.io/github/stars/DaniAkash/react-native-masonry-scrollview.svg?style=social
151+
[github-star]: https://github.com/DaniAkash/react-native-masonry-scrollview/stargazers

RNMasonryExample/assets/icon.png

6.03 KB
Loading

RNMasonryExample/assets/splash.png

42.6 KB
Loading

assets/horizontal.gif

2.22 MB
Loading

assets/vertical.gif

2.65 MB
Loading

0 commit comments

Comments
 (0)