🧱 React Native Masonry ScrollView
Simple easy to use Masonry ScrollView for React Native that extends the original ScrollView ✨
!Versionversion-badgepackage !Downloadsdownloads-badgenpmtrends
!Star on GitHubgithub-star-badgegithub-star !Watch on GitHubgithub-watch-badgegithub-watch !Twitter Followtwitter-badgetwitter
Installation
yarn add react-native-masonry-scrollview
# or
npm i react-native-masonry-scrollview
Usage
The Masonry ScrollView splits the content of theScrollView
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.import React from "react";
import { View, StyleSheet } from "react-native";
import RNMasonryScroll from "react-native-masonry-scrollview";
const Box = () => <View style={styles.box} />;
const App = () => (
<RNMasonryScroll>
{/**
* Masonry ScrollView only expects children as a list
*/}
{[
<Box key={0} />,
<Box key={1} />,
<Box key={2} />,
<Box key={3} />,
<Box key={4} />,
<Box key={5} />
]}
</RNMasonryScroll>
);
const styles = StyleSheet.create({
box: {
height: 50,
width: 50,
backgroundColor: "red",
margin: 16
}
});
export default App;
Advanced Usage
Refer the example expo app inRNMasonryExample/
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 MasonrycolumnStyle?: StyleProp<ViewStyle>
Style applied to the View
component that is wrapping your components inside the Masonry ScrollView.oddColumnStyle?: StyleProp<ViewStyle>
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<ViewStyle>
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 verticalScrollViewProps
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.
<img src="./assets/vertical.gif" style="height: 480px" title="Vertical Masonry" float="left">
<img src="./assets/horizontal.gif" style="height: 480px" title="Horizontal Masonry" float="right">
From the Example App