wip

t

Author: macrozone

components/lib/addAnimatedSupport.js

@@ -0,0 +1,37 @@
+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

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types';
 const ARKitManager = NativeModules.ARKitManager;
 
 export const position = PropTypes.shape({
-  x: PropTypes.number,
-  y: PropTypes.number,
-  z: PropTypes.number,
+  x: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  y: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  z: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
 });
 
 export const scale = PropTypes.number;