Skip to content

Commit aebd236

Browse files
gusgardgusgard
committed
add more options, readme, etc
1 parent 68cb30c commit aebd236

12 files changed

Lines changed: 145 additions & 94 deletions

File tree

‎README.md‎

Lines changed: 34 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<img alt="npm version" src="https://travis-ci.org/gusgard/react-native-grid-list.svg?branch=master">
77
</p>
88

9+
![Demo](./demo.gif)
10+
911
## Installation
1012

1113
```
@@ -22,41 +24,46 @@ npm install react-native-grid-list --save
2224

2325
```js
2426
import React, { Component } from 'react';
25-
import {
26-
StyleSheet,
27-
Image,
28-
} from 'react-native';
27+
import { StyleSheet, Image } from 'react-native';
2928

3029
import GridList from 'react-native-grid-list';
3130

3231
const items = [
33-
{ thumbnail: { uri:'http://lorempixel.com/640/480/animals'} },
34-
{ thumbnail: {uri: 'https://facebook.github.io/react-native/img/favicon.png'} },
35-
{ thumbnail: {uri: 'http://lorempixel.com/640/480/nature'} },
32+
{ thumbnail: { uri: 'https://lorempixel.com/200/200/animals' } },
33+
{ thumbnail: { uri: 'https://lorempixel.com/200/200/city' } },
34+
{ thumbnail: { uri: 'https://lorempixel.com/200/200/nature' } },
35+
{ thumbnail: { uri: 'https://lorempixel.com/200/200/cats' } },
3636
];
3737

38-
export default class ExampleGrid extends Component {
39-
38+
export default class App extends PureComponent {
4039
renderItem = ({ item, index }) => (
41-
<Image
42-
style={styles.image}
43-
source={item.thumbnail}
44-
/>
45-
)
40+
<Image style={styles.image} source={item.thumbnail} />
41+
);
4642

4743
render() {
4844
return (
49-
<GridList
50-
renderItem={this.renderItem}
51-
data={items}
52-
numColumns={3}
53-
/>
45+
<View style={styles.container}>
46+
<ListGrid
47+
showSeparator
48+
data={items}
49+
numColumns={3}
50+
renderItem={this.renderItem}
51+
/>
52+
</View>
5453
);
5554
}
5655
}
5756

5857
const styles = StyleSheet.create({
59-
...
58+
container: {
59+
flex: 1,
60+
backgroundColor: 'white',
61+
},
62+
image: {
63+
width: '100%',
64+
height: '100%',
65+
borderRadius: 10,
66+
},
6067
});
6168
```
6269

@@ -66,11 +73,13 @@ const styles = StyleSheet.create({
6673

6774
## Props
6875

69-
| Prop | Default | Type | Description |
70-
| :--------- | :--------: | :------: | :----------------------------------------- |
71-
| numColumns | 3 | `number` | Number of elements in a row |
72-
| data | _required_ | `array` | Data used when render items |
73-
| renderItem | _required_ | `func` | Function that render each item of the grid |
76+
| Prop | Default | Type | Description |
77+
| :------------ | :--------: | :-------------: | :----------------------------------------- |
78+
| numColumns | 3 | `number` | Number of elements in a row |
79+
| data | _required_ | `array` | Data used when render items |
80+
| renderItem | _required_ | `func` | Function that render each item of the grid |
81+
| itemStyle | {} | `ViewPropTypes` | Style for the wrapper of item |
82+
| showSeparator | false | `bool` | Show a separator between items |
7483

7584
## Author
7685

‎demo.gif‎

2.87 MB
Loading

‎example/App.js‎

Lines changed: 40 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,44 @@
1-
import React, { Component } from 'react';
2-
import { StyleSheet, View } from 'react-native';
1+
import React, { PureComponent } from 'react';
2+
import { Image, StyleSheet, View } from 'react-native';
33
import ListGrid from 'react-native-grid-list';
44

5-
const logo = {
6-
uri: 'https://facebook.github.io/react-native/img/opengraph.png',
5+
const newImage = {
6+
0: 'business',
7+
1: 'cats',
8+
2: 'city',
9+
3: 'food',
10+
4: 'nightlife',
11+
5: 'fashion',
12+
6: 'people',
13+
7: 'nature',
14+
8: 'animals',
15+
9: 'imageUrl',
716
};
8-
const items = [
9-
{ id: 1, thumbnail: logo },
10-
{ id: 2, thumbnail: logo },
11-
{ id: 3, thumbnail: logo },
12-
];
1317

14-
export default class App extends Component {
18+
const image = index => ({
19+
thumbnail: {
20+
uri: `https://lorempixel.com/200/200/${
21+
newImage[index % (Object.keys(newImage).length - 1)]
22+
}`,
23+
},
24+
});
25+
26+
const items = Array.from(Array(30)).map((_, index) => image(index));
27+
28+
export default class App extends PureComponent {
29+
renderItem = ({ item }) => (
30+
<Image style={styles.image} source={item.thumbnail} />
31+
);
32+
1533
render() {
1634
return (
1735
<View style={styles.container}>
18-
<ListGrid data={items} />
36+
<ListGrid
37+
showSeparator
38+
data={items}
39+
numColumns={3}
40+
renderItem={this.renderItem}
41+
/>
1942
</View>
2043
);
2144
}
@@ -24,6 +47,11 @@ export default class App extends Component {
2447
const styles = StyleSheet.create({
2548
container: {
2649
flex: 1,
27-
backgroundColor: '#F5FCFF',
50+
backgroundColor: 'white',
51+
},
52+
image: {
53+
width: '100%',
54+
height: '100%',
55+
borderRadius: 10,
2856
},
2957
});

‎example/ios/GridListExample/Info.plist‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@
5151
<true/>
5252
</dict>
5353
</dict>
54+
<key>NSAllowsArbitraryLoads</key>
55+
<true/>
5456
</dict>
5557
</dict>
5658
</plist>

‎package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,18 @@
88
"type": "git",
99
"url": "git+https://github.com/gusgard/react-native-grid-list.git"
1010
},
11+
"keywords": [
12+
"grid list",
13+
"grid",
14+
"grid view",
15+
"grid component",
16+
"grid layout",
17+
"react native",
18+
"react-native",
19+
"react",
20+
"flatlist",
21+
"flatlist grid"
22+
],
1123
"scripts": {
1224
"lint": "eslint index.js src",
1325
"lint-fix": "eslint index.js src --fix",

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@
33
exports[`renders correctly 1`] = `
44
<FlatList
55
ItemSeparatorComponent={[Function]}
6+
contentContainerStyle={
7+
Object {
8+
"borderBottomWidth": 5,
9+
"borderColor": "#FFFFFF",
10+
"borderTopWidth": 5,
11+
}
12+
}
613
data={
714
Array [
815
Object {
@@ -22,6 +29,7 @@ exports[`renders correctly 1`] = `
2229
disableVirtualization={false}
2330
horizontal={false}
2431
initialNumToRender={10}
32+
itemStyle={Object {}}
2533
keyExtractor={[Function]}
2634
maxToRenderPerBatch={10}
2735
numColumns={3}

‎src/components/ListGrid/index.js‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,67 @@
11
import React, { PureComponent } from 'react';
22
import PropTypes from 'prop-types';
3-
import { View, FlatList, Image } from 'react-native';
3+
import { ViewPropTypes, View, FlatList } from 'react-native';
44

5-
import { width, horizontal } from '../../themes';
5+
import { width } from '../../themes';
66

77
import styles from './styles';
88

9-
const space = horizontal.xxSmall;
109
const calcGridDimension = numColumns => ({
11-
height: width / numColumns - space,
12-
width: width / numColumns - space,
10+
height: width / numColumns,
11+
width: width / numColumns,
1312
});
1413

1514
export default class ListGrid extends PureComponent {
1615
static propTypes = {
1716
data: PropTypes.array.isRequired,
1817
numColumns: PropTypes.number.isRequired,
18+
renderItem: PropTypes.func.isRequired,
19+
showSeparator: PropTypes.bool,
20+
itemStyle: ViewPropTypes.style,
1921
};
2022

2123
static defaultProps = {
2224
numColumns: 3,
23-
};
24-
25-
state = {
26-
index: 0,
25+
itemStyle: {},
26+
showSeparator: false,
2727
};
2828

2929
itemDimension = calcGridDimension(this.props.numColumns);
3030

31-
keyExtractor = item => item.id;
31+
_keyExtractor = (item, index) => index;
3232

33-
renderItem = ({ item, index }) => {
34-
const { numColumns } = this.props;
35-
const position = index % numColumns;
36-
let style = styles.imageCenter;
37-
if (position === 0) {
38-
style = styles.imageRight;
39-
} else if (position === numColumns - 1) {
40-
style = styles.imageLeft;
33+
_renderItem = ({ item, index }) => {
34+
const { showSeparator, renderItem, numColumns, itemStyle } = this.props;
35+
let style = {};
36+
if (showSeparator) {
37+
const position = index % numColumns;
38+
if (position === 0 && numColumns !== 1) {
39+
style = styles.imageLeft;
40+
} else if (position === numColumns - 1) {
41+
style = styles.imageRight;
42+
} else {
43+
style = styles.imageCenter;
44+
}
4145
}
4246
return (
43-
<View style={style}>
44-
<Image
45-
style={[styles.image, this.itemDimension]}
46-
source={item.thumbnail}
47-
resizeMethod="resize"
48-
/>
47+
<View style={[style, this.itemDimension, itemStyle]}>
48+
{renderItem({ item, index })}
4949
</View>
5050
);
5151
};
5252

5353
render() {
54-
const { data, numColumns } = this.props;
54+
const { showSeparator, ...props } = this.props;
5555
return (
5656
<FlatList
57-
numColumns={numColumns}
58-
data={data}
59-
keyExtractor={this.keyExtractor}
60-
renderItem={this.renderItem}
57+
contentContainerStyle={styles.container}
58+
keyExtractor={this._keyExtractor}
59+
ItemSeparatorComponent={() =>
60+
showSeparator ? <View style={styles.separator} /> : null
61+
}
6162
showsVerticalScrollIndicator={false}
62-
ItemSeparatorComponent={() => <View style={styles.separator} />}
63+
{...props}
64+
renderItem={this._renderItem}
6365
/>
6466
);
6567
}

‎src/components/ListGrid/styles.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,30 @@ import { StyleSheet } from 'react-native';
22

33
import { colors } from '../../themes';
44

5-
const borderWidth = 2;
5+
const borderWidth = 5;
66

77
export default StyleSheet.create({
88
imageLeft: {
99
borderLeftWidth: borderWidth,
1010
borderColor: colors.white,
1111
},
1212
imageRight: {
13+
borderLeftWidth: borderWidth,
1314
borderRightWidth: borderWidth,
1415
borderColor: colors.white,
1516
},
1617
imageCenter: {
17-
borderRightWidth: borderWidth,
1818
borderLeftWidth: borderWidth,
1919
borderColor: colors.white,
2020
},
21-
image: {
22-
alignSelf: 'center',
23-
},
2421
separator: {
2522
borderColor: colors.white,
26-
borderWidth,
23+
// paddingVertical: borderWidth * 0.5,
24+
borderWidth: borderWidth * 0.5,
25+
},
26+
container: {
27+
borderTopWidth: borderWidth,
28+
borderBottomWidth: borderWidth,
29+
borderColor: colors.white,
2730
},
2831
});

‎src/components/ListGrid/test.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import { shallow } from 'enzyme';
22
import React from 'react';
3+
import { Image } from 'react-native';
34

45
import ListGrid from './index';
56

67
const logo = { uri: 'https://...' };
78
const items = [{ id: 1, thumbnail: logo }, { id: 2, thumbnail: logo }];
89

910
it('renders correctly', () => {
10-
const wrapper = shallow(<ListGrid data={items} />);
11+
const wrapper = shallow(
12+
<ListGrid
13+
data={items}
14+
renderItem={({ item }) => <Image source={item.thumbnail} />}
15+
/>,
16+
);
1117
expect(wrapper).toMatchSnapshot();
1218
});

‎src/themes/colors.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
export const colors = {
22
white: '#FFFFFF',
33
primary: 'rgb(90, 170, 200)',
4-
primaryDark: 'rgb(15, 45, 90)',
5-
primaryLight: 'rgb(45, 120, 210)',
64
transparent: 'rgba(0, 0, 0, 0)',
75
black: '#000000',
86
};

0 commit comments

Comments
 (0)