Анимация сферы (вращение)

Я пытаюсь создать свою первую анимацию, я просто хочу, чтобы сфера вращалась (например, голова поворачивалась влево или вправо).

Я посмотрел на Animated API, но получаю следующую ошибку:

Преобразование с ключом "rotateY" должно быть строкой или числом: {"rotateY":0}

Например, если бы мой анимированный объект не мог быть проанализирован react-vr.

Вот что я пробовал:

import React from 'react';

import {
  Animated,
  AppRegistry,
  asset,
  Pano,
  Sphere,
  View,
} from 'react-vr';

const sphereProps = {
  radius: 0.5,
  widthSegments: 20,
  heightSegments: 12
};

export default class Test extends React.Component {
  constructor() {
    super();

    this.state = {
      viewPoint: new Animated.Value(0)
    };
  }

  turnLeft = () => {
    Animated.timing(
      this.state.viewPoint,
      {
        toValue: -20,
        duration: 3000
      }
    ).start();
  }

  turnRight = () => {
    Animated.timing(
      this.state.viewPoint,
      {
        toValue: 20,
        duration: 3000
      }
    ).start();
  }

  render() {
    return (
      <Animated.View>
        <Pano source={asset('background.jpg')}/>

        <Sphere
          { ...sphereProps }
          style={{
            color: 'blue',
            transform: [
              { translate: [0, 0, -4] },
              { rotateY: this.state.viewPoint }
            ],
          }}
        />

      </Animated.View>
    );
  }

  componentDidMount() {
    this.turnLeft();
  }
};

AppRegistry.registerComponent('Test', () => Test);

Ошибка возникает при рендеринге компонента, даже если я не вызываю метод #turnLeft.

Вы знаете, как мы должны сделать это анимированное вращение?