We already saw the variables W and H. They represent one part of the screen if we divided it into 100 parts. Let's take a look at the constants.js file to understand this better:

/*** src/constants.js ***/

import { Dimensions } from “react-native";

var { width, height } = Dimensions.get(“window");

export const W = width / 100;
export const H = height / 100;

W can be calculated as the total width of the device's screen divided by 100 units (as percentages are easier to reason about when positioning our sprites). The same goes for H; it can be calculated by dividing the total height by 100. Using these two constants, we can position and size our sprites relative to the size of the screen, so all screen sizes will display the same ratios for positions and sizes.

These constants will be used in all the visual components requiring responsive capabilities so they will show and move different depending on the screen size. This technique will ensure the game is playable even in small screens as the sprites will be resized accordingly.

Let's move on now to the components which will be displayed inside the <GameContainer />.