Feature/small fixes (#3)

* update animation every time component is re-renderer

* add more tests

.travis.yml

@@ -1,3 +1,7 @@
 language: node_js
 node_js:
  - "8"
+notifications:
+ email:
+ on_success: never
+ on_failure: always

package.json

@@ -1,6 +1,6 @@
 {
  "name": "react-native-grid-list",
- "version": "1.0.2",
+ "version": "1.0.4",
  "main": "index.js",
  "license": "Apache-2.0",
  "author": "Gustavo Gard <[email protected]> (https://gusgard.com)",
@@ -62,10 +62,17 @@
  "jest": {
  "preset": "react-native",
  "setupTestFrameworkScriptFile": "./enzyme.js",
- "modulePathIgnorePatterns": ["<rootDir>/example/node_modules/"],
- "snapshotSerializers": ["./node_modules/enzyme-to-json/serializer"]
+ "modulePathIgnorePatterns": [
+ "<rootDir>/example/node_modules/"
+ ],
+ "snapshotSerializers": [
+ "./node_modules/enzyme-to-json/serializer"
+ ]
  },
  "pre-commit": {
- "run": ["lint", "test"]
+ "run": [
+ "lint",
+ "test"
+ ]
  }
 }

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

@@ -1,6 +1,88 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`grid list renders correctly 1`] = `
+<FlatList
+ ItemSeparatorComponent={[Function]}
+ animationDuration={500}
+ contentContainerStyle={false}
+ data={
+ Array [
+ Object {
+ "id": 1,
+ "thumbnail": Object {
+ "uri": "https://...",
+ },
+ },
+ Object {
+ "id": 2,
+ "thumbnail": Object {
+ "uri": "https://...",
+ },
+ },
+ ]
+ }
+ disableVirtualization={false}
+ horizontal={false}
+ initialNumToRender={10}
+ itemStyle={Object {}}
+ keyExtractor={[Function]}
+ maxToRenderPerBatch={10}
+ numColumns={3}
+ onEndReachedThreshold={2}
+ renderItem={[Function]}
+ scrollEventThrottle={50}
+ showAnimation={false}
+ showsVerticalScrollIndicator={false}
+ updateCellsBatchingPeriod={50}
+ windowSize={21}
+/>
+`;
+
+exports[`grid list renders showAnimation 1`] = `
+<FlatList
+ ItemSeparatorComponent={[Function]}
+ animationDuration={500}
+ contentContainerStyle={
+ Object {
+ "borderBottomWidth": 5,
+ "borderColor": "#FFFFFF",
+ "borderTopWidth": 5,
+ }
+ }
+ data={
+ Array [
+ Object {
+ "id": 1,
+ "thumbnail": Object {
+ "uri": "https://...",
+ },
+ },
+ Object {
+ "id": 2,
+ "thumbnail": Object {
+ "uri": "https://...",
+ },
+ },
+ ]
+ }
+ disableVirtualization={false}
+ horizontal={false}
+ initialNumToRender={10}
+ itemStyle={Object {}}
+ keyExtractor={[Function]}
+ maxToRenderPerBatch={10}
+ numColumns={3}
+ onEndReachedThreshold={2}
+ renderItem={[Function]}
+ scrollEventThrottle={50}
+ showAnimation={true}
+ showsVerticalScrollIndicator={false}
+ updateCellsBatchingPeriod={50}
+ windowSize={21}
+/>
+`;
+
+exports[`grid list renders showSeparator 1`] = `
 <FlatList
  ItemSeparatorComponent={[Function]}
  animationDuration={500}

src/components/GridList/index.js

@@ -31,6 +31,12 @@ export default class GridList extends PureComponent {
  };
 
  componentWillMount() {
+ this.animate();
+ }
+ componentWillUpdate() {
+ this.animate();
+ }
+ animate() {
  if (this.props.showAnimation) {
  const { data, numColumns, animationDuration } = this.props;
  this.animatedValue = [];
@@ -70,20 +76,15 @@ export default class GridList extends PureComponent {
  }
  }
 
- return showAnimation ? (
- <Animated.View
- style={[
- style,
- this.itemDimension,
- { opacity: this.animatedValue[index] },
- itemStyle,
- ]}
- >
- {renderItem({ item, index, stagger: this.stagger[index] })}
- </Animated.View>
- ) : (
+ return (
  <View style={[style, this.itemDimension, itemStyle]}>
- {renderItem({ item, index })}
+ {showAnimation ? (
+ <Animated.View style={[{ opacity: this.animatedValue[index] }]}>
+ {renderItem({ item, index, stagger: this.stagger[index] })}
+ </Animated.View>
+ ) : (
+ renderItem({ item, index })
+ )}
  </View>
  );
  };
@@ -92,7 +93,7 @@ export default class GridList extends PureComponent {
  const { showSeparator, ...props } = this.props;
  return (
  <FlatList
- contentContainerStyle={styles.container}
+ contentContainerStyle={showSeparator && styles.container}
  keyExtractor={this._keyExtractor}
  ItemSeparatorComponent={() =>
  showSeparator ? <View style={styles.separator} /> : null

src/components/GridList/test.js

@@ -7,12 +7,39 @@ import GridList from './index';
 const logo = { uri: 'https://...' };
 const items = [{ id: 1, thumbnail: logo }, { id: 2, thumbnail: logo }];
 
-it('renders correctly', () => {
- const wrapper = shallow(
- <GridList
- data={items}
- renderItem={({ item }) => <Image source={item.thumbnail} />}
- />,
- );
- expect(wrapper).toMatchSnapshot();
+describe('grid list', () => {
+ it('renders correctly', () => {
+ const wrapper = shallow(
+ <GridList
+ data={items}
+ renderItem={({ item }) => <Image source={item.thumbnail} />}
+ />,
+ );
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('renders showSeparator', () => {
+ const wrapper = shallow(
+ <GridList
+ showSeparator
+ data={items}
+ renderItem={({ item }) => <Image source={item.thumbnail} />}
+ />,
+ );
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('renders showAnimation', () => {
+ const wrapper = shallow(
+ <GridList
+ showSeparator
+ showAnimation
+ data={items}
+ renderItem={({ item, stagger }) => (
+ <Image source={item.thumbnail} onLoad={() => stagger.start()} />
+ )}
+ />,
+ );
+ expect(wrapper).toMatchSnapshot();
+ });
 });