Refacto/animations api (#12)

* Refactoring animation API

* Adding custom animation in example folder

* Adding shine animation to the project

* Refacto documentation

* Upgrading to v1.0.0

Author: Marvin Frachet

.eslintrc.json

@@ -8,7 +8,8 @@
     "rules": {
       "react/jsx-filename-extension": "off",
       "jsx-a11y/img-has-alt": "off",
-      "jsx-a11y/href-no-hash": "off"
+      "jsx-a11y/href-no-hash": "off",
+      "import/no-extraneous-dependencies": "off"
     },
     "env": {
       "jest": true

ANIMATIONS.md

@@ -1,17 +1,37 @@
-----------
-
 # Animations
 
-The project allows transitions between a `loading` and a `loaded` state.
-
-These animations have to expose a specific API to make the project open to extensions and external behaviours.
-
-* <a href="#api">Animations API</a>
 * <a href="#default">Default animations</a>
 * <a href="#custom">Custom animations</a>
+* <a href="#api">Animations API <span style="color:red">(deprecated in >=v1.0.0)</span></a>
+
+
+<h2 name="default">Default animations</h2>
+
+The project comes with some default animations located in [src/animation](./src/animation). It simply animates the placeholder with visual effects while waiting the real content to appear.
+
+Adding an animation is possible using the [React Native Animated](https://facebook.github.io/react-native/docs/animations.html) component.
+
+You can contribute by creating your own placeholder animations and submitting a pull request.
+
+
+<h2 name="custom">Custom animations</h2>
+
+Recently, the project has allowed to use custom animations by using the HoC props : `customAnimate`. It accepts a `React.Component` representing an Animation.
+
+From the [Example Folder](./Example/customAnimation.js), we have created a simple animation based on color transitions.
+
+To use this in the code, simply use a `Placeholder` component with the `customAnimate` props :
+
+```javascript
+<Placeholder.Media onReady={this.state.isReadyMedia} customAnimate={CustomAnimation}>
+  <Text>Media loaded</Text>
+</Placeholder.Media>
+```
 
 <h2 name="API">Animations API</h2>
 
+<span style="color:red">*This is deprecated since v1.0.0, use component instead of this API while working on version >=v1.0.0*</span>
+
 Here's the constraints needed to use Animations inside of [rn-placeholder](./README.md)
 
 **start**
@@ -63,25 +83,3 @@ export default () => {
   };
 };
 ```
-
-<h2 name="default">Default animations</h2>
-
-The project comes with some default animations located in [src/animation](./src/animation). It simply animates the placeholder with visual effects while waiting the real content to appear.
-
-Adding an animation is possible using the [React Native Animated](https://facebook.github.io/react-native/docs/animations.html) component.
-
-You can contribute by creating your own placeholder animations and submitting a pull request.
-
-It doesn't need too much extra code compared to a standard react native animation, except the previous API.
-
-<h2 name="custom">Custom animations</h2>
-
-Recently, the project has allowed to use custom animations, always following the below API by using the HoC props : `customAnimate`. It accepts a `function` representing an Animation. From the [Example Folder](./Example/customAnimation.js), we have created a simple animation based on color transitions.
-
-To use this in the code, simply use a `Placeholder` component with the `customAnimate` props :
-
-```javascript
-<Placeholder.Media onReady={this.state.isReadyMedia} customAnimate={CustomAnimation}>
-  <Text>Media loaded</Text>
-</Placeholder.Media>
-```

API.md

@@ -14,9 +14,9 @@ The project currently supports 4 different placeholder components.
 
 Each of this components are wrapped in a HOC that brings two others (optional) props :
 
-- `animate: String`: An optional animation available in the `src/animations` folder (see also [Animation API](ANIMATIONS.md)
+- `animate: String`: An optional animation available in the `src/animations` folder (see also [Animations](ANIMATIONS.md)
 - `onReady: any`: A value. If it's different from `null` / `undefined` / `empty string` / `0`, the component children are rendered. This props creates the loading feeling and the component apparition when content is loaded.
-- `customAnimate: func`: An animation functions that follows the [Animation API](ANIMATIONS.md) to create your own custom animations
+- `customAnimate: React.Component`: A custom animation represented by a `React.Component`
 
 
 Navigate the API documentation :

Example/components/Card.js

@@ -52,7 +52,7 @@ export default function Card({ image, username, content, isLoaded, date }) {
       <Placeholder.ImageContent
         onReady={isLoaded}
         lineNumber={2}
-        animate="fade"
+        animate="shine"
         lastLineWidth="40%"
       >
         <View>

Example/customAnimation.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import PropTypes from 'prop-types';
+
+
+const Colors = ({ children }) => {
+  const animation = new Animated.Value(0);
+
+  function start() {
+    return Animated.timing(animation, {
+      toValue: 100,
+      duration: 1500,
+    }).start((e) => {
+      if (e.finished) {
+        start();
+      }
+    });
+  }
+
+  start();
+  const backgroundColor = animation.interpolate({
+    inputRange: [0, 50, 100],
+    outputRange: ['yellow', 'orange', 'blue'],
+  });
+  const style = { backgroundColor };
+  return (
+    <Animated.View style={style}>
+      {children}
+    </Animated.View>
+  );
+};
+
+Colors.propTypes = {
+  children: PropTypes.shape({}),
+};
+
+Colors.defaultProps = {
+  children: null,
+};
+
+export default Colors;

README.md

@@ -20,9 +20,9 @@ Display some placeholder stuff before rendering your text or media content in Re
 - <a href="#usage">How to use it ?</a>
 - [Components available](./API.md)
 - [Creating a custom component](./API.md#custom)
-- [Animation API](./ANIMATIONS.md)
 - [Using default animations](./ANIMATIONS.md#default)
 - [Using a custom animation](./ANIMATIONS.md#custom)
+- [Animation API](./ANIMATIONS.md) <span style="color:red">(deprecated in >=v1.0.0)</span>
 
 <h2 name="#usage">Usage</h2>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-placeholder",
-  "version": "0.0.7",
+  "version": "1.0.0",
   "private": false,
   "main": "index.js",
   "homepage": "https://github.com/mfrachet/rn-placeholder",

src/animation/animations.js

@@ -1,9 +1,11 @@
 import FadeAnimation from './fade';
+import ShineAnimation from './shine';
 
 /**
  * Animation factory
  * Get an animation by its name
  */
 export default {
-  fade: () => new FadeAnimation(),
+  fade: FadeAnimation,
+  shine: ShineAnimation,
 };

src/animation/fade.js

@@ -1,14 +1,16 @@
+import React from 'react';
 import { Animated } from 'react-native';
+import PropTypes from 'prop-types';
 
 /**
  * Create a repetitive fadein / fadeout animation
  */
-export default () => {
+const Fade = ({ children }) => {
   const START_VALUE = 0.5;
   const animation = new Animated.Value(START_VALUE);
 
   function start() {
-    return Animated.sequence([
+    Animated.sequence([
       Animated.timing(animation, {
         toValue: 1,
         duration: 500,
@@ -24,11 +26,21 @@ export default () => {
     });
   }
 
-  /**
-   * The two mandatory properties to return
-   */
-  return {
-    style: { opacity: animation },
-    start,
-  };
+  start();
+  const style = { opacity: animation };
+  return (
+    <Animated.View style={style}>
+      {children}
+    </Animated.View>
+  );
 };
+
+Fade.propTypes = {
+  children: PropTypes.shape({}),
+};
+
+Fade.defaultProps = {
+  children: null,
+};
+
+export default Fade;

src/animation/shine.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Animated, View, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+
+const styles = StyleSheet.create({
+  shine: {
+    width: 30,
+    position: 'absolute',
+    height: '100%',
+    backgroundColor: '#ffffff',
+    opacity: 0.4,
+  },
+});
+/**
+ * Create a repetitive Shine animation
+ */
+const Shine = ({ children }) => {
+  const animation = new Animated.Value(0);
+
+  function start() {
+    animation.setValue(0);
+    Animated.sequence([
+      Animated.timing(animation, {
+        toValue: 100,
+        duration: 750,
+      }),
+    ]).start(() => {
+      start();
+    });
+  }
+
+  start();
+
+  const left = animation.interpolate({
+    inputRange: [0, 100],
+    outputRange: ['0%', '100%'],
+  });
+
+  return (
+    <View>
+      {children}
+      <Animated.View style={[styles.shine, { left }]} />
+    </View>
+  );
+};
+
+Shine.propTypes = {
+  children: PropTypes.shape({}),
+};
+
+Shine.defaultProps = {
+  children: null,
+};
+
+export default Shine;

src/placeholderContainer.js

@@ -1,26 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Animated } from 'react-native';
 import Animations from './animation/animations';
 
-const computeStyleForAnimation = (animation) => {
-  if (!animation.start) {
-    throw new Error('No method `start` found in the animation');
+const renderAnimation = (Animation, Component, props) => {
+  if (!Animation) {
+    throw new Error(`${Animation.name} doesnt exist in the current project`);
   }
-
-  if (!animation.style) {
-    throw new Error('No property `style` found in the animation');
-  }
-  animation.start();
-  return animation.style;
+  return (
+    <Animation>
+      <Component {...props} />
+    </Animation>
+  );
 };
 
-const renderAnimation = (Component, style, props) => (
-  <Animated.View style={style}>
-    <Component {...props} />
-  </Animated.View>
-);
-
 /**
  * Higher order component that factors animation and state ready
  * @param PlaceholderComponent
@@ -34,13 +26,11 @@ const connect = (PlaceholderComponent) => {
     }
 
     if (customAnimate) {
-      const style = computeStyleForAnimation(customAnimate());
-      return renderAnimation(PlaceholderComponent, style, props);
+      return renderAnimation(customAnimate, PlaceholderComponent, props);
     }
 
     if (animate) {
-      const style = computeStyleForAnimation(Animations[animate]());
-      return renderAnimation(PlaceholderComponent, style, props);
+      return renderAnimation(Animations[animate], PlaceholderComponent, props);
     }
     return <PlaceholderComponent {...props} />;
   }