Render key indices

squarenotsquare/src/screens/Game.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import { Text, TouchableOpacity, View, SafeAreaView } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {genSquareChallenge} from '../libs/Random';
 import {shapes} from '../libs/ShapeEnum';
 import { styles } from "./styles/AppStyles";
@@ -13,7 +13,12 @@ import Metrics from "../themes/Metrics";
 function Game(props){
 
   const squareChallenge = genSquareChallenge();
-  const [startTime, setStartTime] = useState(0);
+  const [startTime, setStartTime] = useState(Date.now());
+  const [headerText, setHeaderText] = useState('Ready?');
+  const [headerColor, setHeaderColor] = useState(styles.green);
+  const [headerTextColor, setHeaderTextColor] = useState(styles.darkText);
+
+  useEffect
 
   function generateSquare(){
     return (
@@ -39,17 +44,17 @@ function Game(props){
     )
   }
 
-  function generatePair(answer, shapeIndex) {
+  function generatePair(answer, shapeIndex, pairIndex) {
     if (answer === 0) {
       return (
-        <View style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
+        <View key={pairIndex} style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
           {generateSquare()}
           {generateShape(shapeIndex)}
         </View>
       );
     } else {
       return (
-        <View style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
+        <View key={pairIndex} style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
           {generateShape(shapeIndex)}
           {generateSquare()}
         </View>
@@ -59,14 +64,21 @@ function Game(props){
 
   function renderPairs(){
     return squareChallenge.map((pair, index) => {
-      return generatePair(pair.squarePos, pair.shapeType);
+      return generatePair(pair.squarePos, pair.shapeType, index);
     });
   }
 
   return (
+    <SafeAreaView style={styles.flex}>
+      <View style={[styles.timerView, headerColor, styles.centeredJustify]}>
+        <Text style={[headerTextColor, styles.headerTitleFont, styles.centeredText]}>
+          {headerText}
+        </Text>
+      </View>
       <ScrollView style={[styles.flex, styles.flexColumn]}>
         {renderPairs()}
       </ScrollView>
+    </SafeAreaView>
   );
 }
 

squarenotsquare/src/screens/styles/AppStyles.js

@@ -70,6 +70,7 @@ export const styles = StyleSheet.create({
   lightBackground: {backgroundColor: Colors.material.light},
   green: {backgroundColor: Colors.material.green400},
   darkGreen: {backgroundColor: Colors.material.green400dark},
+  dark: {backgroundColor: Colors.material.dark},
 
   splashLogo: {
     width: Metrics.images.splashLogo.width,
@@ -105,5 +106,9 @@ export const styles = StyleSheet.create({
     zIndex: 1000,
     width: Metrics.icons.buttonIcon,
     height: Metrics.icons.buttonIcon
+  },
+
+  timerView: {
+    height: Metrics.screenSections.timerHeight
   }
 })

squarenotsquare/src/themes/Metrics.js

@@ -26,7 +26,8 @@ class AppMetrics {
     this.screenSections = {
       headerHeight: this.normalize(20),
       sectionWidth: this.screenWidth,
-      footerHeight: this.normalize(10)
+      footerHeight: this.normalize(10),
+      timerHeight: this.normalize(20)
     }
   
     this.icons = {