Merge pull request react-native-ar#150 from HippoAR/improve-animations

support React-native Animated Library

components/lib/addAnimatedSupport.js

@@ -0,0 +1,39 @@
+import { Animated } from 'react-native';
+import React from 'react';
+import get from 'lodash/get';
+
+export default ARComponent => {
+  // there is a strange issue: animatedvalues can't be child objects,
+  // so we have to flatten them
+  // we would need to have an Animated.ValueXYZ
+  const ANIMATEABLE3D = ['position', 'eulerAngles'];
+
+  const ARComponentAnimatedInner = Animated.createAnimatedComponent(
+    class extends React.Component {
+      render() {
+        // unflatten
+        const unflattened = {};
+
+        ANIMATEABLE3D.forEach(key => {
+          unflattened[key] = {
+            x: get(this.props, `${key}_x`),
+            y: get(this.props, `${key}_y`),
+            z: get(this.props, `${key}_z`),
+          };
+        });
+        return <ARComponent {...this.props} {...unflattened} />;
+      }
+    },
+  );
+
+  return props => {
+    const flattenedProps = {};
+
+    ANIMATEABLE3D.forEach(key => {
+      flattenedProps[`${key}_x`] = get(props, [key, 'x']);
+      flattenedProps[`${key}_y`] = get(props, [key, 'y']);
+      flattenedProps[`${key}_z`] = get(props, [key, 'z']);
+    });
+    return <ARComponentAnimatedInner {...props} {...flattenedProps} />;
+  };
+};

components/lib/createArComponent.js

@@ -20,8 +20,9 @@ import {
   scale,
   transition,
 } from './propTypes';
-import processMaterial from './processMaterial';
+import addAnimatedSupport from './addAnimatedSupport';
 import generateId from './generateId';
+import processMaterial from './processMaterial';
 
 const { ARGeosManager } = NativeModules;
 
@@ -227,8 +228,8 @@ export default (mountConfig, propTypes = {}, nonUpdateablePropKeys = []) => {
       return null;
     }
   };
+  const ARComponentAnimated = addAnimatedSupport(ARComponent);
+  ARComponentAnimated.propTypes = allPropTypes;
 
-  ARComponent.propTypes = allPropTypes;
-
-  return ARComponent;
+  return ARComponentAnimated;
 };

components/lib/propTypes.js

@@ -4,35 +4,39 @@ import PropTypes from 'prop-types';
 
 const ARKitManager = NativeModules.ARKitManager;
 
+const animatableNumber = PropTypes.oneOfType([
+  PropTypes.number,
+  PropTypes.object,
+]);
 export const position = PropTypes.shape({
-  x: PropTypes.number,
-  y: PropTypes.number,
-  z: PropTypes.number,
+  x: animatableNumber,
+  y: animatableNumber,
+  z: animatableNumber,
 });
 
-export const scale = PropTypes.number;
+export const scale = animatableNumber;
 export const categoryBitMask = PropTypes.number;
 export const transition = PropTypes.shape({
   duration: PropTypes.number,
 });
 export const eulerAngles = PropTypes.shape({
-  x: PropTypes.number,
-  y: PropTypes.number,
-  z: PropTypes.number,
+  x: animatableNumber,
+  y: animatableNumber,
+  z: animatableNumber,
 });
 
 export const rotation = PropTypes.shape({
-  x: PropTypes.number,
-  y: PropTypes.number,
-  z: PropTypes.number,
-  w: PropTypes.number,
+  x: animatableNumber,
+  y: animatableNumber,
+  z: animatableNumber,
+  w: animatableNumber,
 });
 
 export const orientation = PropTypes.shape({
-  x: PropTypes.number,
-  y: PropTypes.number,
-  z: PropTypes.number,
-  w: PropTypes.number,
+  x: animatableNumber,
+  y: animatableNumber,
+  z: animatableNumber,
+  w: animatableNumber,
 });
 
 export const shaders = PropTypes.shape({
@@ -59,7 +63,7 @@ export const colorBufferWriteMask = PropTypes.oneOf(
   values(ARKitManager.ColorMask),
 );
 
-export const opacity = PropTypes.number;
+export const opacity = animatableNumber;
 
 export const materialProperty = PropTypes.shape({
   path: PropTypes.string,