Skip to content

Commit b712d3e

Browse files
gusgardgusgard
authored
Feature/more props (#4)
* add separator and animation props * add test for props * update examples and refactor * update readme * bump version
1 parent a24b9fc commit b712d3e

File tree

10 files changed

+316
-87
lines changed

10 files changed

+316
-87
lines changed

‎README.md‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -73,17 +73,27 @@ const styles = StyleSheet.create({
7373
});
7474
```
7575

76+
Check the code [here](./example/README.md)
77+
78+
You can use all the props from FlatList:
79+
http://facebook.github.io/react-native/docs/flatlist.html
80+
7681
## Props
7782

78-
| Prop | Default | Type | Description |
79-
| :---------------- | :--------: | :-------------: | :----------------------------------------- |
80-
| numColumns | 3 | `number` | Number of elements in a row |
81-
| data | _required_ | `array` | Data used when render items |
82-
| renderItem | _required_ | `func` | Function that render each item of the grid |
83-
| itemStyle | {} | `ViewPropTypes` | Style for the wrapper of item |
84-
| showSeparator | false | `bool` | Show a separator between items |
85-
| showAnimation | false | `bool` | Show an animation when load item |
86-
| animationDuration | 500 | `number` | Duration of the animation |
83+
| Prop | Default | Type | Description |
84+
| :------------------------------ | :--------: | :-------------: | :----------------------------------------- |
85+
| numColumns | 3 | `number` | Number of elements in a row |
86+
| data | _required_ | `array` | Data used when render items |
87+
| renderItem | _required_ | `func` | Function that render each item of the grid |
88+
| itemStyle | {} | `ViewPropTypes` | Style for the wrapper of item |
89+
| **Separator** |
90+
| showSeparator | false | `bool` | Show a separator between items |
91+
| separatorBorderWidth | 0 | `number` | Set separator width |
92+
| separatorBorderColor | 'white' | `string` | Set separator color |
93+
| **Animation** |
94+
| showAnimation | false | `bool` | Show an animation when load item |
95+
| animationInitialBackgroundColor | 'white' | `string` | Set initial backgroundColor for animation |
96+
| animationDuration | 500 | `number` | Duration of the animation |
8797

8898
## Author
8999

‎demo.gif‎

1.6 MB
Loading

‎example/App.js‎

Lines changed: 73 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { PureComponent } from 'react';
2-
import { Image, StyleSheet, View } from 'react-native';
2+
import { Text, ScrollView, Image, StyleSheet, View } from 'react-native';
33
import GridList from 'react-native-grid-list';
44

55
const newImage = {
@@ -23,40 +23,98 @@ const image = index => ({
2323
},
2424
});
2525

26-
const items = Array.from(Array(20)).map((_, index) => image(index));
26+
const itemsAnimationAndSeparator = Array.from(Array(5)).map((_, index) =>
27+
image(index),
28+
);
29+
const itemsAnimation = Array.from(Array(6)).map((_, index) => image(index));
30+
const itemsSeparator = Array.from(Array(4)).map((_, index) => image(index));
2731

2832
export default class App extends PureComponent {
29-
renderItem = ({ item, stagger }) => (
33+
renderItemAnimationAndSeparator = ({ item, animation }) => (
34+
<Image
35+
style={styles.imageRadius}
36+
source={item.thumbnail}
37+
onLoad={() => animation.start()}
38+
/>
39+
);
40+
renderItemAnimation = ({ item, animation }) => (
3041
<Image
3142
style={styles.image}
3243
source={item.thumbnail}
33-
onLoad={() => stagger.start()}
44+
onLoad={() => animation.start()}
3445
/>
3546
);
47+
renderItemSeparator = ({ item }) => (
48+
<Image style={styles.image} source={item.thumbnail} />
49+
);
3650

3751
render() {
3852
return (
39-
<View style={styles.container}>
40-
<GridList
41-
showAnimation
42-
showSeparator
43-
data={items}
44-
numColumns={3}
45-
renderItem={this.renderItem}
46-
/>
47-
</View>
53+
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
54+
{/* AnimationAndSeparator */}
55+
<Text>Separator and animation when loading</Text>
56+
<View style={styles.girdAnimationAndSeparator}>
57+
<GridList
58+
showAnimation
59+
showSeparator
60+
data={itemsAnimationAndSeparator}
61+
numColumns={3}
62+
renderItem={this.renderItemAnimationAndSeparator}
63+
separatorBorderWidth={10}
64+
separatorBorderColor={'black'}
65+
animationInitialBackgroundColor={'white'}
66+
/>
67+
</View>
68+
69+
{/* Animation */}
70+
<Text>Animation when loading</Text>
71+
<View style={styles.girdAnimation}>
72+
<GridList
73+
showAnimation
74+
data={itemsAnimation}
75+
numColumns={4}
76+
renderItem={this.renderItemAnimation}
77+
/>
78+
</View>
79+
80+
{/* Separator */}
81+
<Text>Separator</Text>
82+
<View style={styles.girdSeparator}>
83+
<GridList
84+
showSeparator
85+
data={itemsSeparator}
86+
numColumns={2}
87+
renderItem={this.renderItemSeparator}
88+
separatorBorderWidth={25}
89+
separatorBorderColor={'white'}
90+
/>
91+
</View>
92+
</ScrollView>
4893
);
4994
}
5095
}
5196

5297
const styles = StyleSheet.create({
5398
container: {
5499
flex: 1,
55-
backgroundColor: 'white',
100+
margin: '5%',
56101
},
57-
image: {
102+
girdAnimationAndSeparator: {
103+
backgroundColor: 'black',
104+
},
105+
girdAnimation: {
106+
backgroundColor: 'tomato',
107+
},
108+
girdSeparator: {
109+
borderWidth: 1,
110+
},
111+
imageRadius: {
58112
width: '100%',
59113
height: '100%',
60114
borderRadius: 10,
61115
},
116+
image: {
117+
width: '100%',
118+
height: '100%',
119+
},
62120
});

‎example/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Installation
2+
3+
## Setup
4+
5+
Run `yarn install`
6+
7+
## Start
8+
9+
Run `yarn start`
10+
11+
## Simulator
12+
13+
For an Android device `yarn android`
14+
15+
For an iOS device `yarn ios`
16+
17+
![Demo](./demo.gif)

‎example/demo.gif‎

1.19 MB
Loading

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-grid-list",
3-
"version": "1.0.4",
3+
"version": "1.0.5",
44
"main": "index.js",
55
"license": "Apache-2.0",
66
"author": "Gustavo Gard <[email protected]> (https://gusgard.com)",
@@ -30,6 +30,7 @@
3030
"lint-fix": "eslint index.js src --fix",
3131
"test": "jest",
3232
"test-watch": "jest --watch",
33+
"start": "echo ----- Check example folder ----- 👻",
3334
"publish": "npm publish"
3435
},
3536
"dependencies": {

‎src/components/GridList/__snapshots__/test.js.snap‎

Lines changed: 98 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ exports[`grid list renders correctly 1`] = `
44
<FlatList
55
ItemSeparatorComponent={[Function]}
66
animationDuration={500}
7+
animationInitialBackgroundColor="#FFFFFF"
78
contentContainerStyle={false}
89
data={
910
Array [
@@ -31,6 +32,8 @@ exports[`grid list renders correctly 1`] = `
3132
onEndReachedThreshold={2}
3233
renderItem={[Function]}
3334
scrollEventThrottle={50}
35+
separatorBorderColor="#FFFFFF"
36+
separatorBorderWidth={0}
3437
showAnimation={false}
3538
showsVerticalScrollIndicator={false}
3639
updateCellsBatchingPeriod={50}
@@ -42,11 +45,95 @@ exports[`grid list renders showAnimation 1`] = `
4245
<FlatList
4346
ItemSeparatorComponent={[Function]}
4447
animationDuration={500}
48+
animationInitialBackgroundColor="#FFFFFF"
49+
contentContainerStyle={false}
50+
data={
51+
Array [
52+
Object {
53+
"id": 1,
54+
"thumbnail": Object {
55+
"uri": "https://...",
56+
},
57+
},
58+
Object {
59+
"id": 2,
60+
"thumbnail": Object {
61+
"uri": "https://...",
62+
},
63+
},
64+
]
65+
}
66+
disableVirtualization={false}
67+
horizontal={false}
68+
initialNumToRender={10}
69+
itemStyle={Object {}}
70+
keyExtractor={[Function]}
71+
maxToRenderPerBatch={10}
72+
numColumns={3}
73+
onEndReachedThreshold={2}
74+
renderItem={[Function]}
75+
scrollEventThrottle={50}
76+
separatorBorderColor="#FFFFFF"
77+
separatorBorderWidth={0}
78+
showAnimation={true}
79+
showsVerticalScrollIndicator={false}
80+
updateCellsBatchingPeriod={50}
81+
windowSize={21}
82+
/>
83+
`;
84+
85+
exports[`grid list renders showAnimation with duration and initialBackground setted 1`] = `
86+
<FlatList
87+
ItemSeparatorComponent={[Function]}
88+
animationDuration={1000}
89+
animationInitialBackgroundColor="beige"
90+
contentContainerStyle={false}
91+
data={
92+
Array [
93+
Object {
94+
"id": 1,
95+
"thumbnail": Object {
96+
"uri": "https://...",
97+
},
98+
},
99+
Object {
100+
"id": 2,
101+
"thumbnail": Object {
102+
"uri": "https://...",
103+
},
104+
},
105+
]
106+
}
107+
disableVirtualization={false}
108+
horizontal={false}
109+
initialNumToRender={10}
110+
itemStyle={Object {}}
111+
keyExtractor={[Function]}
112+
maxToRenderPerBatch={10}
113+
numColumns={3}
114+
onEndReachedThreshold={2}
115+
renderItem={[Function]}
116+
scrollEventThrottle={50}
117+
separatorBorderColor="#FFFFFF"
118+
separatorBorderWidth={0}
119+
showAnimation={true}
120+
showsVerticalScrollIndicator={false}
121+
updateCellsBatchingPeriod={50}
122+
windowSize={21}
123+
/>
124+
`;
125+
126+
exports[`grid list renders showSeparator 1`] = `
127+
<FlatList
128+
ItemSeparatorComponent={[Function]}
129+
animationDuration={500}
130+
animationInitialBackgroundColor="#FFFFFF"
45131
contentContainerStyle={
46132
Object {
47-
"borderBottomWidth": 5,
133+
"borderBottomWidth": 0,
48134
"borderColor": "#FFFFFF",
49-
"borderTopWidth": 5,
135+
"borderRightWidth": 0,
136+
"borderTopWidth": 0,
50137
}
51138
}
52139
data={
@@ -75,21 +162,25 @@ exports[`grid list renders showAnimation 1`] = `
75162
onEndReachedThreshold={2}
76163
renderItem={[Function]}
77164
scrollEventThrottle={50}
78-
showAnimation={true}
165+
separatorBorderColor="#FFFFFF"
166+
separatorBorderWidth={0}
167+
showAnimation={false}
79168
showsVerticalScrollIndicator={false}
80169
updateCellsBatchingPeriod={50}
81170
windowSize={21}
82171
/>
83172
`;
84173

85-
exports[`grid list renders showSeparator 1`] = `
174+
exports[`grid list renders showSeparator with border and width setted 1`] = `
86175
<FlatList
87176
ItemSeparatorComponent={[Function]}
88177
animationDuration={500}
178+
animationInitialBackgroundColor="#FFFFFF"
89179
contentContainerStyle={
90180
Object {
91181
"borderBottomWidth": 5,
92-
"borderColor": "#FFFFFF",
182+
"borderColor": "tomato",
183+
"borderRightWidth": 5,
93184
"borderTopWidth": 5,
94185
}
95186
}
@@ -119,6 +210,8 @@ exports[`grid list renders showSeparator 1`] = `
119210
onEndReachedThreshold={2}
120211
renderItem={[Function]}
121212
scrollEventThrottle={50}
213+
separatorBorderColor="tomato"
214+
separatorBorderWidth={5}
122215
showAnimation={false}
123216
showsVerticalScrollIndicator={false}
124217
updateCellsBatchingPeriod={50}

0 commit comments

Comments
 (0)