Render animated object with React Native using expo and three,js - react-native

Question

I aim to show a rotating cube in a react-native app. I can show the cube with this code but whenever I uncomment the rotation, it disappears. Anything with the renderer ?
I use snack and the cube is visible only in the "Web" view, not in iOS or Android.
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { GLView } from 'expo-gl';
import { THREE } from 'expo-three';
import ExpoTHREE from 'expo-three';
export default class App extends React.Component {
constructor(props) {
super(props);
this._onGLContextCreate = this._onGLContextCreate.bind(this);
this.animate = this.animate.bind(this);
}
_onGLContextCreate = async gl => {
this.scene = new THREE.Scene();
this.camera = new THREE.Camera(
75,
gl.drawingBufferWidth / gl.drawingBufferHeight,
0.1,
1000
);
this.scene.add(this.camera);
this.renderer = new ExpoTHREE.Renderer({ gl });
this.geometry = new THREE.BoxGeometry(1, 1, 1);
this.material = new THREE.MeshBasicMaterial({ color: 0xff0f00 });
this.obj = new THREE.Mesh(this.geometry, this.material);
this.edges = new THREE.EdgesGeometry(this.geometry);
this.line = new THREE.LineSegments(
this.edges,
new THREE.LineBasicMaterial({ color: 0xffffff })
);
this.scene.add(this.line);
this.scene.add(this.obj);
this.animate();
};
animate = () => {
requestAnimationFrame(this.animate);
//this.geometry.rotation.x += 0.01;
//this.geometry.rotation.y += 0.01;
this.renderer.render(this.scene, this.camera);
};
render() {
return (
<View style={styles.container}>
<GLView
style={{ width: 300, height: 300 }}
onContextCreate={this._onGLContextCreate}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Code was mainly adapted from https://medium.com/#zohayb1996/using-expo-and-three-js-with-react-native-4bcb353b222e
Thanks

Answer 1

In Three.js you don't rotate a Geometry, you rotate the Mesh. Simply update your animate function to use:
this.obj.rotation.x += 0.01;
this.obj.rotation.y += 0.01;