Merge branch 'v2'

Release version 2.

* Animate placeholder while loading.

Author: Wyatt McBain

AsyncImageAnimated/.gitignore

@@ -54,3 +54,4 @@ fastlane/screenshots
 
 # Project
 lib/
+package-lock.json

AsyncImageAnimated/package-lock.json

@@ -15,7 +15,7 @@
 		"@types/react-native": "^0.47.5",
 		"react": "16.0.0-alpha.12",
 		"react-native": "0.47.1",
-		"react-native-async-image-animated": "^1.0.5",
+		"react-native-async-image-animated": "^2.0.0",
 		"typescript": "^2.4.2"
 	},
 	"devDependencies": {

AsyncImageAnimated/package.json

@@ -1,10 +1,10 @@
 # AsyncImageAnimated
 
 <p align="center">
-  <img src ="https://media.giphy.com/media/X06Nr75bS7k8U/giphy.gif" />
+  <img src ="https://media.giphy.com/media/l378cTcPS3Ki2Kfq8/giphy.gif" />
 </p>
 
-Simple cross-platform asynchronous image component for React Native 🙌🏻 with a few animation options.  Displays a placeholder color while the image loads from the network.
+Simple cross-platform asynchronous image component for React Native 🙌🏻 with a few animation options.  Displays an animated placeholder color while the image loads from the network.
 
 Source is available in the `AsyncImageAnimated/src` directory. 🙂
 
@@ -41,12 +41,10 @@ Fetch an image with a 30x30 dimension and a placeholderColor.
 
   ```javacript
   source: {
-    uri: string // Network uri
+    uri: string,
   },
-  style: { // StyleSheet or Objects will work
-    [key: string]: string | number | Object
-  },
-  key?: string, // For lists
+  style: '@types/react-native'.ViewStyle,
+  key?: string,
   placeholderColor?: string,
   delay?: number,
   animationStyle?: 'fade' | 'shrink' | 'explode'
@@ -72,7 +70,7 @@ Then reload to view animations again.
 
 ## Planned Updates
 
-* [ ] Animate color of placeholder while loading
+* [x] Animate color of placeholder while loading - v2
 * [ ] Placeholder image support
 * [ ] Progressive image support
 * [ ] Tests / Detox Tests

README.md

@@ -1,6 +1,6 @@
 {
   "name": "react-native-async-image-animated",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Asynchronous loading Image component for React Native.",
   "main": "index.js",
   "scripts": {

package.json

@@ -9,10 +9,13 @@ import { Component } from 'react'
 
 import {
   Animated,
+  Easing,
   View,
   ViewStyle,
 } from 'react-native'
 
+import { lightenColor } from './lib/color'
+
 type AnimationStyle = 'fade' | 'shrink' | 'explode'
 
 interface Props {
@@ -32,6 +35,8 @@ interface State {
     image: Animated.Value,
     placeholder: Animated.Value,
   },
+  placeholderColorAnimated: Animated.Value,
+  placeholderColorLightened: string,
   placeholderScale: Animated.Value,
 }
 
@@ -49,10 +54,18 @@ export default class AsyncImageAnimated extends Component<Props, State> {
         image: new Animated.Value(0),
         placeholder: new Animated.Value(0.8),
       },
+      placeholderColorAnimated: new Animated.Value(1.0),
+      placeholderColorLightened: props.placeholderColor
+        ? lightenColor(props.placeholderColor, 20)
+        : 'transparent',
       placeholderScale: new Animated.Value(1.0),
     }
   }
 
+  componentDidMount() {
+    this.animatePlaceholderColor()
+  }
+
   render() {
     const {
       key,
@@ -65,6 +78,8 @@ export default class AsyncImageAnimated extends Component<Props, State> {
       loaded,
       opacity,
       placeholderScale,
+      placeholderColorAnimated,
+      placeholderColorLightened,
     } = this.state
 
     return (
@@ -90,8 +105,15 @@ export default class AsyncImageAnimated extends Component<Props, State> {
               style={[
                 style,
                 {
-                  backgroundColor: placeholderColor ||
-                    'transparent',
+                  backgroundColor: placeholderColor
+                    ? placeholderColorAnimated.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [
+                          placeholderColor,
+                          placeholderColorLightened,
+                        ],
+                      })
+                    : 'transparent',
                   opacity: opacity.placeholder,
                   position: 'absolute',
                   transform: [{ scale: placeholderScale }],
@@ -126,13 +148,11 @@ export default class AsyncImageAnimated extends Component<Props, State> {
           delay,
           duration: 200,
           toValue: 0,
-          useNativeDriver: true,
         }),
         Animated.timing(image, {
           delay,
           duration: 300,
           toValue: 1,
-          useNativeDriver: true,
         }),
       ]).start(callback)
 
@@ -143,20 +163,17 @@ export default class AsyncImageAnimated extends Component<Props, State> {
             delay,
             duration: 200,
             toValue: 0,
-            useNativeDriver: true,
           }),
           Animated.timing(placeholderScale, {
             delay,
             duration: 200,
             toValue: 0,
-            useNativeDriver: true,
           }),
         ]),
         Animated.timing(image, {
           delay,
           duration: 300,
           toValue: 1,
-          useNativeDriver: true,
         }),
       ]).start(callback)
 
@@ -167,35 +184,50 @@ export default class AsyncImageAnimated extends Component<Props, State> {
             delay,
             duration: 100,
             toValue: 0.7,
-            useNativeDriver: true,
           }),
           Animated.timing(placeholder, {
             duration: 100,
             toValue: 0.66,
-            useNativeDriver: true,
           }),
         ]),
         Animated.parallel([
           Animated.parallel([
             Animated.timing(placeholder, {
               duration: 200,
               toValue: 0,
-              useNativeDriver: true,
             }),
             Animated.timing(placeholderScale, {
               duration: 200,
               toValue: 1.2,
-              useNativeDriver: true,
             }),
           ]),
           Animated.timing(image, {
             delay: 200,
             duration: 300,
             toValue: 1,
-            useNativeDriver: true,
           }),
         ]),
       ]).start(callback)
     }
   }
+
+  private animatePlaceholderColor = () => {
+    const {
+      loaded,
+      placeholderColorAnimated,
+    } = this.state
+
+    if (loaded) return
+
+    Animated.sequence([
+      Animated.timing(placeholderColorAnimated, {
+        duration: 500,
+        toValue: 1.0,
+      }),
+      Animated.timing(placeholderColorAnimated, {
+        duration: 400,
+        toValue: 0.0,
+      }),
+    ]).start(this.animatePlaceholderColor)
+  }
 }

src/AsyncImageAnimated.tsx

@@ -0,0 +1,26 @@
+
+// https://css-tricks.com/snippets/javascript/lighten-darken-color/
+
+/* tslint:disable no-bitwise */
+export const lightenColor = (color: string, amount: number) => {
+  if (color [0] === '#') color = color.slice(1)
+
+  const colorValue = parseInt(color, 16)
+
+  let red = (colorValue >> 16) + amount
+
+  if (red > 255) red = 255
+  else if  (red < 0) red = 0
+
+  let blue = ((colorValue >> 8) & 0x00FF) + amount
+
+  if (blue > 255) blue = 255
+  else if  (blue < 0) blue = 0
+
+  let green = (colorValue & 0x0000FF) + amount
+
+  if (green > 255) green = 255
+  else if (green < 0) green = 0
+
+  return `#${(green | (blue << 8) | (red << 16)).toString(16)}`
+}

src/lib/color.tsx

@@ -8,7 +8,7 @@
     "outDir": "./lib"
   },
   "include": [
-    "src/*"
+    "src/**/*"
   ],
   "exclude": [
     "node_modules",

tsconfig.json

@@ -36,6 +36,10 @@
         "member-access": [
             true,
             "no-public"
+        ],
+        "curly": [
+            true,
+            "ignore-same-line"
         ]
     },
     "rulesDirectory": []