Ball.js

import React from 'react';
import {
  Sphere
} from 'react-vr';
import * as CANNON from 'cannon/build/cannon.js'

export default class Particle extends React.Component {
  constructor(props) {
    this.body = new CANNON.Body({
      mass: 1,
      shape: new Cannon.Sphere(1),
    })
    props.world.add(this.body)
    this.state = {
      position: [0, 0, 0]
    }
  }
  
  componentDidMount() {
    this.animate()
  }
  
  componentWillUnmount() {
    cancelAnimationFrame(this.request)
  }
  
  animate() {
    this.request = requestAnimationFrame( this.animate );
    this.setState({
      position: this.body.position
    })
  }
  
  render() {
    return (
      <Sphere
        style={{
          transform: [{
             translate: [
               this.state.position.x / 10,
               this.state.position.y / 10,
               this.state.position.z / 10
             ]
          }]
        }}
      />
    )
  }
}

index.vr.js

import React, { PropTypes } from 'react';
import {
  AppRegistry,
  View,
  DirectionalLight,
  AmbientLight,
} from 'react-vr';
import * as CANNON from 'cannon/build/cannon.js'
import Ball from './vr/components/ball'

export default class KenReactVR extends React.Component {
  constructor() {
    super()
    this.world = new CANNON.World()
    this.world.gravity = new CANNON.Vec3(0, -1, 0)
  }
  
  componentDidMount() {
    this.tick()
  }
  
  tick() {
    requestAnimationFrame( this.tick );
    world.step(dt);
  }
  
  render() {
    return (
      <View>
        <Ball world={this.world} />
      </View>
    )
  }
}