-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
84 lines (71 loc) · 1.52 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React from 'react';
import {
SafeAreaView,
StyleSheet,
Dimensions,
View,
Image
} from 'react-native';
//import Masonry from './components/Masonry';
import Masonry from 'react-native-infinite-masonry';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<Masonry
itemsProvider={dataItemProvider}
renderItem={Item}
pageSize={10}
/>
</SafeAreaView>
);
}
const vpWidth = Dimensions.get('window').width;
function Item(dataItem, key){
return (
<View
key={key}
style={{
...styles.card,
height: dataItem.height
}}
>
<Image
style={styles.img}
source={{uri: dataItem.image_url}}
/>
</View>
);
}
function dataItemProvider(pageSize=10){
return [...Array(pageSize).keys()].map((i) => {
return {
image_url: `https://i.picsum.photos/id/${parseInt(Math.random() * 200)}/300/400.jpg`,
height: parseInt(Math.max(0.3, Math.random()) * vpWidth),
key:i
};
});
}
const styles = StyleSheet.create({
container: {
alignContent: 'center',
alignItems: 'center'
},
card: {
margin: 8,
width: vpWidth *.5 - 15,
shadowColor: "#0000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
backgroundColor: 'white',
borderRadius: 5,
},
img: {
borderRadius: 5,
flex: 1,
}
});