add banner timeout

vds-app/App/screens/Banner.js

@@ -54,13 +54,6 @@ class Banner extends React.Component {
       </View>
     )
   }
-
-  /*
-  AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // Test ID, Replace with your-admob-unit-id
-  AdMobInterstitial.setTestDeviceID('EMULATOR');
-  await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
-  await AdMobInterstitial.showAdAsync();
-  */
 }
 
 export default Banner

vds-app/App/screens/Splash.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { View, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image } from "react-native"
-import { AdMobBanner, AdMobInterstitial, PublisherBanner, AdMobRewarded } from "expo-ads-admob"
+import { AdMobBanner } from "expo-ads-admob"
 
 import { Button, ButtonContainer } from "../components/Button"
 import { colors, texts, credentials } from "../components/Variables"
@@ -8,6 +8,8 @@ import { examQuestions } from "../components/ExamQuestions"
 
 const screen = Dimensions.get("window")
 const logo = require("../assets/logo.png")
+const maxTime = 10
+let interval = null
 
 const styles = StyleSheet.create({
   container: {
@@ -16,14 +18,19 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20
   },
   bannerContainer: {
-    backgroundColor: colors.white,
+    backgroundColor: colors.dark_blue,
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     flex: 1,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    height: screen.height-230
+  },
+  bannerContainerColapsed: {
+    backgroundColor: colors.dark_blue,
+    height: 300
   },
   banner: {
     width: 300,
@@ -45,6 +52,14 @@ const styles = StyleSheet.create({
     paddingVertical: 20,
     marginTop: 20,
   },
+  timer: {
+    color: colors.white,
+    fontSize: 30,
+    textAlign: "center",
+    fontWeight: "600",
+    paddingVertical: 20,
+    marginBottom: 20,
+  },
   safearea: {
     flex: 1,
     marginTop: 10,
@@ -65,16 +80,37 @@ const styles = StyleSheet.create({
 class Splash extends React.Component {
 
   state = {
-    results: false
+    bannerExpanded: true,
+    timer: maxTime
   }
 
   bannerError = (e) => {
     console.log("Banner error: ", e)
   }
 
-
   render() {
 
+    if(this.state.timer==maxTime) {
+      interval = setInterval( () => {
+        this.setState( (state) => {
+          return {
+            timer: this.state.timer-1,
+          }
+        })
+      }, 1000)
+    }
+
+    if(this.state.timer < 1) {
+      clearInterval(interval)
+      setTimeout( () => {
+        this.setState( (state) => {
+          return {
+            bannerExpanded: false
+          }
+        })
+      }, 500)
+    }
+
     return (
       <View style={styles.container} >
         <View style={styles.logoContainer} >
@@ -110,12 +146,18 @@ class Splash extends React.Component {
           </View>
 
         </SafeAreaView>
-        <View style={styles.bannerContainer}>
+        <View style={[styles.bannerContainer, !this.state.bannerExpanded ? styles.bannerContainerColapsed  : {}]}>
           <AdMobBanner
             style={styles.banner}
             bannerSize="mediumRectangle"
             adUnitID={credentials.adMobUnitID}
             onDidFailToReceiveAdWithError={this.bannerError} />
+
+          {
+            this.state.bannerExpanded ? (
+              <Text style={styles.timer}>{this.state.timer}</Text>
+            ) : null
+          }
         </View>
       </View>
     )