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

Commit 8ad1355

Browse files
DaniAkashDaniAkash
committed
created example project
1 parent 83924a4 commit 8ad1355

File tree

3 files changed

+131
-37
lines changed

3 files changed

+131
-37
lines changed

‎RNMasonryExample/App.tsx‎

Lines changed: 113 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,63 @@
1-
import React from "react";
2-
import { StyleSheet, Text, View, Image } from "react-native";
1+
import React, { useState } from "react";
2+
import { StyleSheet, Text, View, SafeAreaView, Switch } from "react-native";
33
import * as Animatable from "react-native-animatable";
44
import RNMasonryScroll from "react-native-masonry-scrollview";
5+
import Image from "react-native-scalable-image";
6+
import { useResponsiveWidth } from "react-native-responsive-dimensions";
57

68
const { createAnimatableComponent } = Animatable;
79

810
const AnimatableView = createAnimatableComponent(View);
911

1012
const images = [
13+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
14+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
15+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
16+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
17+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
18+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
19+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
20+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
21+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
22+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
23+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
24+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
25+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
26+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
27+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
28+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
29+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
30+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
31+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
32+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
33+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
34+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
35+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
36+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
37+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
38+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
39+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
40+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
41+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
42+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
43+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
44+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
45+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
46+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
47+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
48+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
49+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
50+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
51+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
52+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
53+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
54+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
55+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
56+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
57+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
58+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
59+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
60+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
1161
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
1262
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
1363
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
@@ -34,44 +84,70 @@ const images = [
3484
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60"
3585
];
3686

37-
export default function App() {
87+
const App = () => {
88+
const imageWidth: number = useResponsiveWidth(50) - 20;
89+
const [isHorizontal, setIsHorizontal] = useState<boolean>(false);
90+
91+
const toggleHorizontal = () => setIsHorizontal(!isHorizontal);
92+
93+
const imageProp = isHorizontal
94+
? { height: imageWidth }
95+
: { width: imageWidth };
96+
3897
return (
39-
<RNMasonryScroll
40-
columns={3}
41-
evenColumnStyle={{}}
42-
oddColumnStyle={{ marginTop: 60 }}
43-
>
44-
{images.map((image, imageIndex) => {
45-
return (
46-
<AnimatableView
47-
animation="fadeInUp"
48-
delay={100 * imageIndex}
49-
style={{
50-
height: 300,
51-
width: 300,
52-
margin: 10,
53-
borderRadius: 10,
54-
overflow: "hidden",
55-
backgroundColor: "silver"
56-
}}
57-
>
58-
<Image
59-
style={{ flex: 1 }}
60-
source={{ uri: image }}
61-
key={imageIndex}
62-
/>
63-
</AnimatableView>
64-
);
65-
})}
66-
</RNMasonryScroll>
98+
<SafeAreaView>
99+
<View style={styles.header}>
100+
<Switch onValueChange={toggleHorizontal} value={isHorizontal} />
101+
<Text style={styles.headerText}>Horizontal</Text>
102+
</View>
103+
<RNMasonryScroll
104+
removeClippedSubviews={true}
105+
columns={isHorizontal ? 3 : 2}
106+
evenColumnStyle={styles.evenColumnStyle}
107+
oddColumnStyle={
108+
isHorizontal
109+
? styles.oddColumnStyleHorizontal
110+
: styles.oddColumnStyleVertical
111+
}
112+
horizontal={isHorizontal}
113+
>
114+
{images.map((image, imageIndex) => {
115+
return (
116+
<AnimatableView
117+
animation={isHorizontal ? "fadeInRight" : "fadeInUp"}
118+
delay={100 * imageIndex}
119+
style={styles.imageContainer}
120+
>
121+
<Image source={{ uri: image }} {...imageProp} key={imageIndex} />
122+
</AnimatableView>
123+
);
124+
})}
125+
</RNMasonryScroll>
126+
</SafeAreaView>
67127
);
68-
}
128+
};
69129

70130
const styles = StyleSheet.create({
71-
container: {
72-
flex: 1,
73-
backgroundColor: "#fff",
131+
header: {
132+
flexDirection: "row",
74133
alignItems: "center",
75-
justifyContent: "center"
76-
}
134+
justifyContent: "center",
135+
margin: 8
136+
},
137+
headerText: {
138+
fontWeight: "bold",
139+
marginHorizontal: 8,
140+
fontSize: 16
141+
},
142+
imageContainer: {
143+
margin: 10,
144+
borderRadius: 10,
145+
overflow: "hidden",
146+
backgroundColor: "silver"
147+
},
148+
evenColumnStyle: {},
149+
oddColumnStyleVertical: { marginTop: 60 },
150+
oddColumnStyleHorizontal: { marginLeft: 60 }
77151
});
152+
153+
export default App;

‎RNMasonryExample/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
"react-dom": "~16.9.0",
1414
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
1515
"react-native-animatable": "^1.3.3",
16+
"react-native-masonry-scrollview": "^0.0.1",
17+
"react-native-responsive-dimensions": "^3.0.0",
18+
"react-native-scalable-image": "^1.0.0",
1619
"react-native-screens": "2.0.0-alpha.12",
1720
"react-native-web": "~0.11.7"
1821
},

‎RNMasonryExample/yarn.lock‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4128,6 +4128,21 @@ react-native-animatable@^1.3.3:
41284128
dependencies:
41294129
prop-types "^15.7.2"
41304130

4131+
react-native-masonry-scrollview@^0.0.1:
4132+
version "0.0.1"
4133+
resolved "https://registry.yarnpkg.com/react-native-masonry-scrollview/-/react-native-masonry-scrollview-0.0.1.tgz#e2b3778f2045b1386a2695fea1b634ed58aeeeb1"
4134+
integrity sha512-p39ePmvA8KCLpMqdnEP/mNJ0I5xQYjiN9v8XqrEKptwkMwWFop3MWBUYF6F68tvCVXoXf0XF5q74+0mPmNx41w==
4135+
4136+
react-native-responsive-dimensions@^3.0.0:
4137+
version "3.0.0"
4138+
resolved "https://registry.yarnpkg.com/react-native-responsive-dimensions/-/react-native-responsive-dimensions-3.0.0.tgz#da1691ca47cec4ec1ddc846c06fefcaac011352b"
4139+
integrity sha512-hXjChQGFhqxW21Y9vT5yCrxqJj36APurTk2K6AZX08KK3cPyXEwIWmvEIOfoVZs54lMY2b9LSX5UOG9ft/kpxA==
4140+
4141+
react-native-scalable-image@^1.0.0:
4142+
version "1.0.0"
4143+
resolved "https://registry.yarnpkg.com/react-native-scalable-image/-/react-native-scalable-image-1.0.0.tgz#2751a02c2610b4266eb06ce0d466fb1eff266127"
4144+
integrity sha512-Hcizro1eh7GhelTIjpAYi6WR8ybHNFkMMPSpEeMNI6u1Lxt7b6o97MM9r7+g8hlUjKUlNPQvwaqcf+rW75sSfg==
4145+
41314146
react-native-screens@2.0.0-alpha.12:
41324147
version "2.0.0-alpha.12"
41334148
resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-alpha.12.tgz#35a6ef3b472958e9d35f0ca9e582d0d158f8e379"

0 commit comments

Comments
 (0)