Shadow offset support, better react-native-web support

.gitignore

@@ -4,3 +4,6 @@
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+
+# distribution
+dist/

__tests__/createAnimation.js

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 
-import createAnimation from '../createAnimation';
+import createAnimation from '../src/createAnimation';
 
 describe('createAnimation', () => {
   it('should support from and to keys', () => {

__tests__/getDefaultStyleValue.js

@@ -1,6 +1,6 @@
 /* eslint-env jest */
 
-import getDefaultStyleValue from '../getDefaultStyleValue';
+import getDefaultStyleValue from '../src/getDefaultStyleValue';
 
 describe('getDefaultStyleValue', () => {
   it('should return 0deg for skew and rotate keys', () => {

package.json

@@ -3,13 +3,15 @@
   "version": "1.3.0",
   "description": "Easy to use declarative transitions and animations for React Native",
   "typings": "typings/react-native-animatable.d.ts",
-  "main": "index.js",
+  "main": "dist/index.js",
   "scripts": {
     "jest": "./node_modules/.bin/jest",
     "jest:watch": "npm run jest -- --watch",
     "lint": "./node_modules/.bin/eslint ./*.js",
     "test": "npm run lint && npm run jest",
-    "format": "./node_modules/.bin/prettier --write {,definitions/,__tests__}*.js"
+    "format": "./node_modules/.bin/prettier --write {,definitions/,__tests__}*.js",
+    "build": "babel src/ --out-dir dist/ --source-maps",
+    "prepublish": "npm run build"
   },
   "keywords": [
     "react-native",
@@ -46,6 +48,7 @@
     "testPathIgnorePatterns": ["<rootDir>/Examples/"]
   },
   "devDependencies": {
+    "babel-cli": "^6.26.0",
     "babel-eslint": "^7.0.0",
     "babel-jest": "23.0.1",
     "babel-preset-react-native": "4.0.0",

createAnimatableComponent.js → src/createAnimatableComponent.js

@@ -7,6 +7,12 @@ import flattenStyle from './flattenStyle';
 import createAnimation from './createAnimation';
 import { getAnimationByName, getAnimationNames } from './registry';
 import EASING_FUNCTIONS from './easing';
+import {
+  getAnimationValue,
+  getDefaultAnimationValue,
+  setTransitionValue,
+  animateValue,
+} from './handleObjectValues'
 
 // These styles are not number based and thus needs to be interpolated
 const INTERPOLATION_STYLE_PROPERTIES = [
@@ -107,17 +113,21 @@ function transitionToValue(
 ) {
   const animation =
     duration || easing || delay
-      ? Animated.timing(transitionValue, {
+      ? animateValue(
+          Animated.timing,
+          property,
+          transitionValue,
           toValue,
-          delay,
-          duration: duration || 1000,
-          easing:
-            typeof easing === 'function'
+          {
+            delay,
+            duration: duration || 1000,
+            easing: typeof easing === 'function'
               ? easing
               : EASING_FUNCTIONS[easing || 'ease'],
-          useNativeDriver,
-        })
-      : Animated.spring(transitionValue, { toValue, useNativeDriver });
+            useNativeDriver,
+          }
+        )
+      : animateValue(Animated.spring, property, transitionValue, toValue, { useNativeDriver });
   setTimeout(() => onTransitionBegin(property), delay);
   animation.start(() => onTransitionEnd(property));
 }
@@ -243,7 +253,7 @@ export default function createAnimatableComponent(WrappedComponent) {
           transitionValues[key] = new Animated.Value(0);
           styleValues[key] = value;
         } else {
-          const animationValue = new Animated.Value(value);
+          const animationValue = getAnimationValue(key, value);
           transitionValues[key] = animationValue;
           styleValues[key] = animationValue;
         }
@@ -446,12 +456,13 @@ export default function createAnimatableComponent(WrappedComponent) {
         const toValue = toValuesFlat[property];
         let transitionValue = transitionValues[property];
         if (!transitionValue) {
-          transitionValue = new Animated.Value(0);
+          transitionValue = getDefaultAnimationValue(property);
         }
         const needsInterpolation =
           INTERPOLATION_STYLE_PROPERTIES.indexOf(property) !== -1;
         const needsZeroClamping =
           ZERO_CLAMPED_STYLE_PROPERTIES.indexOf(property) !== -1;
+        // no currently known object styles need interpolation (shadowOffset)
         if (needsInterpolation) {
           transitionValue.setValue(0);
           transitionStyle[property] = transitionValue.interpolate({
@@ -461,6 +472,7 @@ export default function createAnimatableComponent(WrappedComponent) {
           currentTransitionValues[property] = toValue;
           toValuesFlat[property] = 1;
         } else {
+          // no currently known object styles need zero clamping (shadowOffset)
           if (needsZeroClamping) {
             transitionStyle[property] = transitionValue.interpolate({
               inputRange: [0, 1],
@@ -471,7 +483,7 @@ export default function createAnimatableComponent(WrappedComponent) {
           } else {
             transitionStyle[property] = transitionValue;
           }
-          transitionValue.setValue(fromValue);
+          setTransitionValue(property, transitionValue, fromValue);
         }
       });
       this.setState(

getDefaultStyleValue.js → src/getDefaultStyleValue.js

@@ -15,6 +15,9 @@ export default function getDefaultStyleValue(key, flatStyle) {
   if (key === 'backgroundColor') {
     return 'rgba(0,0,0,0)';
   }
+  if (key === 'shadowColor') {
+    return 'rgba(0,0,0,0)';
+  }
   if (key === 'color' || key.indexOf('Color') !== -1) {
     return 'rgba(0,0,0,1)';
   }
@@ -27,6 +30,9 @@ export default function getDefaultStyleValue(key, flatStyle) {
   if (key === 'fontSize') {
     return 14;
   }
+  if (key === 'shadowOffset') {
+    return { height: 0, width: 0 };
+  }
   if (key.indexOf('margin') === 0 || key.indexOf('padding') === 0) {
     for (let suffix, i = 0; i < DIRECTIONAL_SUFFICES.length; i++) {
       suffix = DIRECTIONAL_SUFFICES[i];

src/handleObjectValues.js

@@ -0,0 +1,47 @@
+import { Animated, Easing } from 'react-native';
+
+function isNumber(num){
+  return typeof num === 'number' && Number.isFinite(num)
+}
+
+export function getAnimationValue(key, value){
+  return key === 'shadowOffset' ? {
+    ...(isNumber(value.height) ? { height: new Animated.Value(value.height) } : {}),
+    ...(isNumber(value.width) ? { width: new Animated.Value(value.width) } : {})
+  } : new Animated.Value(value);
+}
+
+export function getDefaultAnimationValue(key){
+  return key === 'shadowOffset' ? {
+    height: new Animated.Value(0),
+    width: new Animated.Value(0),
+  } : new Animated.Value(0);
+}
+
+export function setTransitionValue(key, target, value){
+  if (key === 'shadowOffset'){
+    if (isNumber(target.width) && isNumber(value.width)) {
+      target.width.setValue(value.width);
+    }
+    if (isNumber(target.height) && isNumber(value.height)) {
+      target.height.setValue(value.height);
+    }
+  } else {
+    target.setValue(value);
+  }
+}
+
+export function animateValue(animation, key, target, toValue, options = {}){
+  if (key === 'shadowOffset'){
+    return Animated.parallel(
+      [
+        target.width && isNumber(toValue.width) &&
+          animation(target.width, { toValue: toValue.width, ...options }),
+        target.height && isNumber(toValue.height) &&
+          animation(target.height, { toValue: toValue.height, ...options })
+      ].filter(a => a)
+    )
+  } else {
+    return animation(target, { toValue, ...options })
+  }
+}