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

Commit da514f8

Browse files
DaniAkashDaniAkash
committed
created example project
1 parent 46bc859 commit da514f8

File tree

10 files changed

+5422
-0
lines changed

10 files changed

+5422
-0
lines changed

‎RNMasonryExample/.expo-shared/assets.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
3+
"89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
4+
}

‎RNMasonryExample/.gitignore‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
node_modules/**/*
2+
.expo/*
3+
npm-debug.*
4+
*.jks
5+
*.p8
6+
*.p12
7+
*.key
8+
*.mobileprovision
9+
*.orig.*
10+
web-build/
11+
web-report/
12+
13+
# macOS
14+
.DS_Store

‎RNMasonryExample/App.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from "react";
2+
import { StyleSheet, Text, View, Image } from "react-native";
3+
import * as Animatable from "react-native-animatable";
4+
import RNMasonryScroll from "react-native-masonry-scrollview";
5+
6+
const { createAnimatableComponent } = Animatable;
7+
8+
const AnimatableView = createAnimatableComponent(View);
9+
10+
const images = [
11+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
12+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
13+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
14+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
15+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
16+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
17+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
18+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
19+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
20+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
21+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
22+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
23+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
24+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
25+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
26+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
27+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
28+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
29+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
30+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
31+
"https://images.unsplash.com/photo-1558981001-792f6c0d5068?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
32+
"https://images.unsplash.com/photo-1580502734537-c6a7ee0bdb41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
33+
"https://images.unsplash.com/photo-1580500325788-5012abe74ebf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60",
34+
"https://images.unsplash.com/photo-1580524764764-284c2a54b185?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60"
35+
];
36+
37+
export default function App() {
38+
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>
67+
);
68+
}
69+
70+
const styles = StyleSheet.create({
71+
container: {
72+
flex: 1,
73+
backgroundColor: "#fff",
74+
alignItems: "center",
75+
justifyContent: "center"
76+
}
77+
});

‎RNMasonryExample/app.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"expo": {
3+
"name": "RNMasonryExample",
4+
"slug": "RNMasonryExample",
5+
"privacy": "public",
6+
"sdkVersion": "36.0.0",
7+
"platforms": ["ios", "android", "web"],
8+
"version": "1.0.0",
9+
"orientation": "portrait",
10+
"icon": "./assets/icon.png",
11+
"splash": {
12+
"image": "./assets/splash.png",
13+
"resizeMode": "contain",
14+
"backgroundColor": "#ffffff"
15+
},
16+
"updates": {
17+
"fallbackToCacheTimeout": 0
18+
},
19+
"assetBundlePatterns": ["**/*"],
20+
"ios": {
21+
"supportsTablet": true
22+
}
23+
}
24+
}

‎RNMasonryExample/assets/icon.png‎

1.07 KB
Loading

‎RNMasonryExample/assets/splash.png‎

7.01 KB
Loading

‎RNMasonryExample/babel.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = function(api) {
2+
api.cache(true);
3+
return {
4+
presets: ["babel-preset-expo"]
5+
};
6+
};

‎RNMasonryExample/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"main": "node_modules/expo/AppEntry.js",
3+
"scripts": {
4+
"start": "expo start",
5+
"android": "expo start --android",
6+
"ios": "expo start --ios",
7+
"web": "expo start --web",
8+
"eject": "expo eject"
9+
},
10+
"dependencies": {
11+
"expo": "~36.0.0",
12+
"react": "~16.9.0",
13+
"react-dom": "~16.9.0",
14+
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
15+
"react-native-animatable": "^1.3.3",
16+
"react-native-screens": "2.0.0-alpha.12",
17+
"react-native-web": "~0.11.7"
18+
},
19+
"devDependencies": {
20+
"@babel/core": "^7.0.0",
21+
"@types/react": "~16.9.0",
22+
"@types/react-native": "~0.60.23",
23+
"babel-preset-expo": "~8.0.0",
24+
"typescript": "~3.6.3"
25+
},
26+
"private": true
27+
}

‎RNMasonryExample/tsconfig.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"compilerOptions": {
3+
"allowSyntheticDefaultImports": true,
4+
"jsx": "react-native",
5+
"lib": ["dom", "esnext"],
6+
"moduleResolution": "node",
7+
"noEmit": true,
8+
"skipLibCheck": true,
9+
"resolveJsonModule": true
10+
}
11+
}

0 commit comments

Comments
 (0)