RockUp and RockDown

The sprites for the rocks have no logic on them and are basically <Image /> components positioned and sized by the parent component. This is the code for <RockUp />:

/*** src/components/RockUp.js ***/

import React, { Component } from “react";
import { Image } from “react-native";

import { W, H } from “../constants";

export default class RockUp extends Component {
  render() {
    return (
      <Image
        resizeMode="stretch"
        source={require(“../../images/rock-down.png")}
        style={{
          position: “absolute",
          left: this.props.x,
          top: this.props.y,
          width: this.props.width * W,
          height: this.props.height * H
        }}
      />
    );
  }
}

The height and the width will be calculated by the following formulae: this.props.width * W and this.props.height * H. This will size the rock relative to the device's screen and the provided height and width.

The code for <RockDown /> is quite similar...