Start

The start screen includes two images:

• A logo

• A start button explaining how to start up the game (tapping anywhere on the screen)

  /*** src/components/Start.js ***/
  
  import React, { Component } from “react";
  import { Text, View, StyleSheet, Image } from “react-native";
  
  import { W, H } from “../constants";
  
  export default class Start extends Component {
    render() {
      return (
        <View style={{ position: “absolute", left: 20 * W, top: 3 * H }}>
          <Image
            resizeMode="contain"
            source={require(“../../images/logo.png")}
            style={{ width: 60 * W }}
          />
          <Image
            resizeMode="contain"
            style={{ marginTop: 15, width: 60 * W }}
            source={require(“../../images/tap.png")}
          />
        </View>
      );
    }
  }

We are using our H and W constants again to ensure the elements are positioned in the right place on every device screen.