fixing license

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2004-2018 Marvin Frachet
+Copyright (c) 2004-Today Marvin Frachet
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the
@@ -17,4 +17,4 @@ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

docs/ANIMATIONS.md

@@ -10,17 +10,50 @@ You can contribute by creating your own placeholder animations and submitting a
 
 ## Custom animations
 
-Recently, the project has allowed to use custom animations by using the HoC props : `customAnimate`. It accepts a `React.Component` representing an Animation.
+It's also possible to create custom animations using the `customAnimation` props of the `Placeholder` component:
 
-From the [Example Folder](./Example/customAnimation.js), we have created a simple animation based on color transitions.
+```jsx
+<Placeholder
+  customAnimation={ColorAnimation}
+  isReady={isReady}
+  whenReadyRender={ComponentLoaded}
+>
+  <Line width="70%" />
+  <Line />
+  <Line />
+  <Line width="30%" />
+</Placeholder>
+```
 
-To use this in the code, simply use a `Placeholder` component with the `customAnimate` props :
+The `ColorAnimation` can be defined this way:
 
 ```javascript
-<Placeholder.Media
-  onReady={this.state.isReadyMedia}
-  customAnimate={CustomAnimation}
->
-  <Text>Media loaded</Text>
-</Placeholder.Media>
+import React from "react";
+import { Animated } from "react-native";
+
+export const ColorAnimation = ({ 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, padding: 20 };
+
+  return <Animated.View style={style}>{children}</Animated.View>;
+};
 ```

docs/COMPONENTS.md

@@ -15,7 +15,7 @@
 
 ### Composable API
 
-```jsx
+```javascript
 import Placeholder, { Line, Media } from "rn-placeholder";
 
 export const Compo = () => {
@@ -42,7 +42,7 @@ export const Compo = () => {
 
 ### Paragraph
 
-```jsx
+```javascript
 import { Paragraph } from "rn-placeholder";
 
 export const Compo = () => {
@@ -70,7 +70,7 @@ export const Compo = () => {
 
 ### ImageContent
 
-```jsx
+```javascript
 import { ImageContent } from "rn-placeholder";
 
 export const Compo = () => {
@@ -102,7 +102,7 @@ export const Compo = () => {
 
 #### By composing
 
-```jsx
+```javascript
 <Placeholder
   animation="fade"
   isReady={isReady}
@@ -116,7 +116,7 @@ export const Compo = () => {
 
 #### Using an HoC
 
-```jsx
+```javascript
 import { connect } from "rn-placeholder";
 
 const TextHoc = connect(() => <Text>Hello world</Text>);

package.json

@@ -2,6 +2,7 @@
   "name": "rn-placeholder",
   "version": "1.3.3",
   "private": false,
+  "license": "./LICENSE.md",
   "main": "./src/index.js",
   "homepage": "https://github.com/mfrachet/rn-placeholder",
   "repository": {