How to use Animated with Shape primitives such as Box in React-VR? Error: "Cannot add property _tracking, object is not extensible"

Question

Trying to make Box move up and down on the Y coordinate utilizing react-vr Box and Animated components.

Currently, I'm getting a

Cannot add property _tracking, object is not extensible

error.

Code below:

Component "Cube" using Animated.createAnimatedComponent(Box);

import React from 'react';
import {
  Box,
  Animated,
} from 'react-vr';

const AnimatedBox = Animated.createAnimatedComponent(Box);

class Cube extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      y: new Animated.Value(0)
    }
    this.animate = this.animate.bind(this);
  }

  componentDidMount () {
    this.animate();
  }

  animate () {
    Animated.sequence([
      Animated.timing(
        this.state.y,
        {
          toValue: 3,
          duration: 200
        }
      ),
      Animated.timing(
        this.state.y,
        {
          toValue: 0,
          duration: 200,
        }
      )
    ]).start();
  }

  render() {
    const { width, height, depth, x, y, z } = this.props.cube;
    return (
      <AnimatedBox
        dimWidth={width}
        dimDepth={depth}
        dimHeight={height}
        style={{
                        transform: [{translate: [x, this.state.y, z]}],
                        color: 'white'
                    }}
      />)
  }
}

export default Cube;

index.vr.js render method passing in cube props to Cube Component:

  render() {
    const cube = { 
      width: 1, 
      height: 1, 
      depth: 1, 
      x: 0, 
      y: 0, 
      z: -5 
    };
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <View>
          <Cube cube={{...cube}} />);
        </View>
      </View>
    )
  }
};

Thank you for your help!

score 1 · Answer 1 · answered Nov 07 '17 at 16:40

I answered my own question:

For animating on the Y axis, animations use 'translateY' with component state to animate:

Incorrect: style={{transform: [{translate: [x, this.state.y, z]}]}}

Correct: style={{ transform: [{translate: [x, y, z]}, {translateY: this.state.y}]}}

Currently, Animated supports Animated.View, Animated.Text, Animated.Image, and models by using the method Animated.createAnimatedComponent(model) where model refers to a model file such as .obj. The last did not work for the React-vr Box in my initial question.

Solution: we're able to wrap < Box > inside an < Animated.View > component and apply the animation to < Animated.View >.

Code for the animated MovingBox component with a looping animation:

import React, {Component} from 'react';
import {
  View,
  Animated,
  Box
} from 'react-vr';

class MovingBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      y: new Animated.Value(0)
    };
    this.animate = this.animate.bind(this);
  }

  componentDidMount () {
    this.animate();
  }

  animate () {
    Animated.sequence([
      Animated.timing(
        this.state.y,
        {
          toValue: 3,
          duration: 2000
        }
      ),
      Animated.timing(
        this.state.y,
        {
          toValue: 0,
          duration: 2000,
        }
      )
    ]).start(this.animate);
  }


  render () {
    const {x, y, z, width, height, depth} = this.props.cube;
    return (
      <Animated.View
      style={{
        transform: [
          {translate: [x, y, z]},
          {translateY: this.state.y}
        ]
      }}>
        <Box
        dimWidth={width}
        dimDepth={depth}
        dimHeight={height}
        style = {{
          transform: [
            {translate: [0, 0, 0]},
          ]
        }} />
      </Animated.View>
    );
  }
}

export {MovingBox};

How to use Animated with Shape primitives such as Box in React-VR? Error: "Cannot add property _tracking, object is not extensible"

1 Answers1