refactor name and add animation when loading (#2)

Author: gusgard

README.md

@@ -1,4 +1,4 @@
-# :godmode: Grid list component
+# :foggy: Grid list component
 
 <p align="left">
   <a href="https://npmjs.org/package/react-native-grid-list"><img alt="npm version" src="http://img.shields.io/npm/v/react-native-grid-list.svg"></a>
@@ -22,9 +22,15 @@ npm install react-native-grid-list --save
 
 ## Example
 
+### Expo
+
+[Example](https://snack.expo.io/@gusgard/react-native-grid-list)
+
+### Code
+
 ```js
-import React, { Component } from 'react';
-import { StyleSheet, Image } from 'react-native';
+import React, { PureComponent } from 'react';
+import { View, StyleSheet, Image } from 'react-native';
 
 import GridList from 'react-native-grid-list';
 
@@ -43,7 +49,7 @@ export default class App extends PureComponent {
   render() {
     return (
       <View style={styles.container}>
-        <ListGrid
+        <GridList
           showSeparator
           data={items}
           numColumns={3}
@@ -67,19 +73,17 @@ const styles = StyleSheet.create({
 });
 ```
 
-### Expo
-
-[Example QR](https://snack.expo.io/girdList)
-
 ## Props
 
-| Prop          |  Default   |      Type       | Description                                |
-| :------------ | :--------: | :-------------: | :----------------------------------------- |
-| numColumns    |     3      |    `number`     | Number of elements in a row                |
-| data          | _required_ |     `array`     | Data used when render items                |
-| renderItem    | _required_ |     `func`      | Function that render each item of the grid |
-| itemStyle     |     {}     | `ViewPropTypes` | Style for the wrapper of item              |
-| showSeparator |   false    |     `bool`      | Show a separator between items             |
+| Prop              |  Default   |      Type       | Description                                |
+| :---------------- | :--------: | :-------------: | :----------------------------------------- |
+| numColumns        |     3      |    `number`     | Number of elements in a row                |
+| data              | _required_ |     `array`     | Data used when render items                |
+| renderItem        | _required_ |     `func`      | Function that render each item of the grid |
+| itemStyle         |     {}     | `ViewPropTypes` | Style for the wrapper of item              |
+| showSeparator     |   false    |     `bool`      | Show a separator between items             |
+| showAnimation     |   false    |     `bool`      | Show an animation when load item           |
+| animationDuration |    500     |    `number`     | Duration of the animation                  |
 
 ## Author
 

demo.gif

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
-import ListGrid from 'react-native-grid-list';
+import GridList from 'react-native-grid-list';
 
 const newImage = {
   0: 'business',
@@ -23,17 +23,22 @@ const image = index => ({
   },
 });
 
-const items = Array.from(Array(30)).map((_, index) => image(index));
+const items = Array.from(Array(20)).map((_, index) => image(index));
 
 export default class App extends PureComponent {
-  renderItem = ({ item }) => (
-    <Image style={styles.image} source={item.thumbnail} />
+  renderItem = ({ item, stagger }) => (
+    <Image
+      style={styles.image}
+      source={item.thumbnail}
+      onLoad={() => stagger.start()}
+    />
   );
 
   render() {
     return (
       <View style={styles.container}>
-        <ListGrid
+        <GridList
+          showAnimation
           showSeparator
           data={items}
           numColumns={3}

example/App.js

@@ -1,3 +1,3 @@
-import { ListGrid } from './src/components';
+import { GridList } from './src/components';
 
-export default ListGrid;
+export default GridList;

index.js

@@ -9,6 +9,10 @@
     "url": "git+https://github.com/gusgard/react-native-grid-list.git"
   },
   "description": "React native grid list component",
+  "bugs": {
+    "url": "https://github.com/gusgard/react-native-grid-list/issues"
+  },
+  "homepage": "https://github.com/gusgard/react-native-grid-list#readme",
   "keywords": [
     "grid list",
     "grid",
@@ -58,17 +62,10 @@
   "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"]
   }
 }

package.json

@@ -3,6 +3,7 @@
 exports[`renders correctly 1`] = `
 <FlatList
   ItemSeparatorComponent={[Function]}
+  animationDuration={500}
   contentContainerStyle={
     Object {
       "borderBottomWidth": 5,
@@ -36,6 +37,7 @@ exports[`renders correctly 1`] = `
   onEndReachedThreshold={2}
   renderItem={[Function]}
   scrollEventThrottle={50}
+  showAnimation={false}
   showsVerticalScrollIndicator={false}
   updateCellsBatchingPeriod={50}
   windowSize={21}

…ents/ListGrid/__snapshots__/test.js.snap …ents/GridList/__snapshots__/test.js.snapsrc/components/ListGrid/__snapshots__/test.js.snap renamed to src/components/GridList/__snapshots__/test.js.snap src/components/ListGrid/__snapshots__/test.js.snap renamed to src/components/GridList/__snapshots__/test.js.snap

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { ViewPropTypes, View, FlatList } from 'react-native';
+import { Animated, ViewPropTypes, View, FlatList } from 'react-native';
 
 import { width } from '../../themes';
 
@@ -11,27 +11,53 @@ const calcGridDimension = numColumns => ({
   width: width / numColumns,
 });
 
-export default class ListGrid extends PureComponent {
+export default class GridList extends PureComponent {
   static propTypes = {
     data: PropTypes.array.isRequired,
     numColumns: PropTypes.number.isRequired,
     renderItem: PropTypes.func.isRequired,
     showSeparator: PropTypes.bool,
+    showAnimation: PropTypes.bool,
+    animationDuration: PropTypes.number,
     itemStyle: ViewPropTypes.style,
   };
 
   static defaultProps = {
     numColumns: 3,
     itemStyle: {},
     showSeparator: false,
+    showAnimation: false,
+    animationDuration: 500,
   };
 
+  componentWillMount() {
+    if (this.props.showAnimation) {
+      const { data, numColumns, animationDuration } = this.props;
+      this.animatedValue = [];
+
+      this.stagger = data.map((_, index) => {
+        this.animatedValue[index] = new Animated.Value(0);
+        return Animated.stagger(0, [
+          Animated.timing(this.animatedValue[index], {
+            toValue: 1,
+            duration: animationDuration * Math.ceil((index + 1) / numColumns),
+          }),
+        ]);
+      });
+    }
+  }
   itemDimension = calcGridDimension(this.props.numColumns);
 
   _keyExtractor = (item, index) => index;
 
   _renderItem = ({ item, index }) => {
-    const { showSeparator, renderItem, numColumns, itemStyle } = this.props;
+    const {
+      showAnimation,
+      showSeparator,
+      renderItem,
+      numColumns,
+      itemStyle,
+    } = this.props;
     let style = {};
     if (showSeparator) {
       const position = index % numColumns;
@@ -43,7 +69,19 @@ export default class ListGrid extends PureComponent {
         style = styles.imageCenter;
       }
     }
-    return (
+
+    return showAnimation ? (
+      <Animated.View
+        style={[
+          style,
+          this.itemDimension,
+          { opacity: this.animatedValue[index] },
+          itemStyle,
+        ]}
+      >
+        {renderItem({ item, index, stagger: this.stagger[index] })}
+      </Animated.View>
+    ) : (
       <View style={[style, this.itemDimension, itemStyle]}>
         {renderItem({ item, index })}
       </View>

src/components/ListGrid/index.js src/components/GridList/index.jssrc/components/ListGrid/index.js renamed to src/components/GridList/index.js

@@ -2,14 +2,14 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import { Image } from 'react-native';
 
-import ListGrid from './index';
+import GridList from './index';
 
 const logo = { uri: 'https://...' };
 const items = [{ id: 1, thumbnail: logo }, { id: 2, thumbnail: logo }];
 
 it('renders correctly', () => {
   const wrapper = shallow(
-    <ListGrid
+    <GridList
       data={items}
       renderItem={({ item }) => <Image source={item.thumbnail} />}
     />,

src/components/ListGrid/styles.js src/components/GridList/styles.jssrc/components/ListGrid/styles.js renamed to src/components/GridList/styles.js

@@ -1 +1 @@
-export { default as ListGrid } from './ListGrid';
+export { default as GridList } from './GridList';