GameContainer is responsible for starting up the game once the user taps the screen. It will do this using requestAnimationFrame()--one of the custom timers implemented in React Native.
requestAnimationFrame() is similar to setTimeout(), but the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S); therefore, requestAnimationFrame() is more suited for animated games as it deals only with frames.
As happens with most animated games, we need to create a loop to animate the sprites in the screen by calculating the next position of each element on each frame. This loop will be created by a function named nextFrame() inside our GameContainer:
nextFrame() {
if (this.props.gameOver) return;
var elapsedTime = new Date() - this.time;
this.time = new Date();
this.props.tick(elapsedTime);
this.animationFrameId =
requestAnimationFrame(this.nextFrame.bind(this));
}This function will...