From e80c44f29a2011f9fc94e024490d67132394ea3e Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 20 Feb 2018 17:59:35 +0100 Subject: [PATCH 1/2] wip t --- components/lib/addAnimatedSupport.js | 37 ++++++++++++++++++++++++++++ components/lib/createArComponent.js | 9 ++++--- components/lib/propTypes.js | 6 ++--- 3 files changed, 45 insertions(+), 7 deletions(-) create mode 100644 components/lib/addAnimatedSupport.js diff --git a/components/lib/addAnimatedSupport.js b/components/lib/addAnimatedSupport.js new file mode 100644 index 0000000..b9eb984 --- /dev/null +++ b/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 ; + } + }, + ); + + 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 ; + }; +}; diff --git a/components/lib/createArComponent.js b/components/lib/createArComponent.js index 77decc9..dc1178e 100644 --- a/components/lib/createArComponent.js +++ b/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; }; diff --git a/components/lib/propTypes.js b/components/lib/propTypes.js index e8c8420..82d9249 100644 --- a/components/lib/propTypes.js +++ b/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; From bbdc41e52880e3f055a7e3fce900cc32ab94894d Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 20 Feb 2018 20:56:40 +0100 Subject: [PATCH 2/2] adjust proptypes --- components/lib/addAnimatedSupport.js | 2 ++ components/lib/propTypes.js | 36 +++++++++++++++------------- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/components/lib/addAnimatedSupport.js b/components/lib/addAnimatedSupport.js index b9eb984..5c5cb7b 100644 --- a/components/lib/addAnimatedSupport.js +++ b/components/lib/addAnimatedSupport.js @@ -7,11 +7,13 @@ export default ARComponent => { // 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`), diff --git a/components/lib/propTypes.js b/components/lib/propTypes.js index 82d9249..33aa92a 100644 --- a/components/lib/propTypes.js +++ b/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.oneOfType([PropTypes.number, PropTypes.object]), - y: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), - z: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), + 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,