add footer banner in quiz and recap

vds-app/App/components/Variables.js

@@ -94,5 +94,6 @@ export const resultsScheme = [
 
 export const credentials = {
   adMobUnitIDTest: "ca-app-pub-3940256099942544/6300978111",
-  adMobUnitID: "ca-app-pub-4145771316565790/1848957462"
+  adMobUnitID: "ca-app-pub-4145771316565790/1848957462",
+  adMobUnitIDFooter: "ca-app-pub-4145771316565790/9810834234"
 }

vds-app/App/screens/Quiz.js

@@ -1,8 +1,9 @@
 import React from "react"
 import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, ImageBackground, BackHandler } from "react-native"
+import { AdMobBanner } from "expo-ads-admob"
 
 import { Button, ButtonContainer } from "../components/Button"
-import { colors } from "../components/Variables"
+import { colors, credentials } from "../components/Variables"
 
 const bgImage = require("../assets/bg.jpg")
 
@@ -26,6 +27,16 @@ const styles = StyleSheet.create({
   bg: {
     width: "100%",
     height: "100%"
+  },
+  bannerContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  banner: {
+    width: 320,
+    height: 100,
+    marginVertical: 20
   }
 })
 
@@ -47,6 +58,10 @@ class Quiz extends React.Component {
     results: false
   }
 
+  bannerError = (e) => {
+    console.log("Banner error (footer): ", e)
+  }
+
   componentDidMount() {
     BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
   }
@@ -152,6 +167,14 @@ class Quiz extends React.Component {
           </Text>
         </SafeAreaView>
         : <SafeAreaView></SafeAreaView>}
+
+        <View style={styles.bannerContainer}>
+          <AdMobBanner
+            style={styles.banner}
+            bannerSize="largeBanner"
+            adUnitID={credentials.adMobUnitIDFooter}
+            onDidFailToReceiveAdWithError={this.bannerError} />
+        </View>
       </ScrollView>
       </ImageBackground>
     )

vds-app/App/screens/Recap.js

@@ -1,8 +1,9 @@
 import React from "react"
 import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, ImageBackground, BackHandler} from "react-native"
+import { AdMobBanner } from "expo-ads-admob"
 
 import { Button, ButtonContainer } from "../components/Button"
-import { colors, texts, examScheme } from "../components/Variables"
+import { colors, texts, examScheme, credentials } from "../components/Variables"
 
 import aerodynamicsQuestions from "../data/aerodynamics"
 import firstAidQuestions from "../data/firstAid"
@@ -80,6 +81,16 @@ const styles = StyleSheet.create({
   bg: {
     width: "100%",
     height: "100%"
+  },
+  bannerContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  banner: {
+    width: 320,
+    height: 100,
+    marginVertical: 20
   }
 })
 
@@ -151,6 +162,14 @@ class Recap extends React.Component {
               />
             </View>
           </SafeAreaView>
+
+          <View style={styles.bannerContainer}>
+            <AdMobBanner
+              style={styles.banner}
+              bannerSize="largeBanner"
+              adUnitID={credentials.adMobUnitIDFooter}
+              onDidFailToReceiveAdWithError={this.bannerError} />
+          </View>
         </ScrollView>
 
       </View>

vds-app/App/screens/Results.js

@@ -205,7 +205,7 @@ class Results extends React.Component {
                   }}/>
                 <Button
                   isBig={true}
-                  color={colors.green_light}
+                  color={colors.white_alpha}
                   text={texts.restart}
                   onPress={() => {this.handleBackButton()}
                   }
@@ -215,7 +215,7 @@ class Results extends React.Component {
               <View style={styles.button}>
                 <Button
                   isBig={true}
-                  color={colors.green_light}
+                  color={colors.white_alpha}
                   text={texts.restart}
                   onPress={() => {this.handleBackButton()}
                   }