Merge branch 'feature/ads_banner' into develop

vds-app/App/components/Variables.js

@@ -45,3 +45,8 @@ export const examScheme = [
   {section: "physiopathology", questions: 1, points: 2},
   {section: "pilotingTechniques", questions: 5, points: 4}
 ]
+
+export const credentials = {
+  adMobUnitIDTest: "ca-app-pub-3940256099942544/6300978111",
+  adMobUnitID: "ca-app-pub-3940256099942544/6300978111" //  "ca-app-pub-4145771316565790/1848957462",
+}

vds-app/App/index.js

@@ -1,6 +1,7 @@
 import { createStackNavigator, createAppContainer } from "react-navigation"
 
 import Splash from "./screens/Splash"
+import Banner from "./screens/Banner"
 import QuizIndex from "./screens/QuizIndex"
 import Quiz from "./screens/Quiz"
 import Exam from "./screens/Exam"
@@ -17,6 +18,16 @@ const MainStack = createStackNavigator({
       }
     })
   },
+  Banner: {
+    screen: Banner,
+    navigationOptions: ({ navigation }) => ({
+      header: null,
+      backgroundColor: colors.yellow,
+      headerStyle: {
+        backgroundColor: colors.yellow
+      }
+    })
+  },
   QuizIndex: {
     screen: QuizIndex,
     navigationOptions: ({ navigation }) => ({

vds-app/App/screens/Banner.js

@@ -0,0 +1,59 @@
+import React from "react"
+import { View, StyleSheet, StatusBar, Text, Dimensions } from "react-native"
+import { AdMobBanner, AdMobInterstitial, PublisherBanner, AdMobRewarded } from "expo-ads-admob"
+
+import { colors, texts, credentials } from "../components/Variables"
+
+const screen = Dimensions.get("window")
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.yellow,
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  title: {
+    color: colors.white,
+    fontSize: 25,
+    textAlign: "center",
+    fontWeight: "600",
+    paddingVertical: 20
+  },
+  banner: {
+    width: "100%",
+    height: "100%",
+    marginVertical: 20
+  },
+})
+
+class Banner extends React.Component {
+
+  state = {
+    results: false
+  }
+
+  bannerError = (e) => {
+    console.log("Banner error: ", e)
+  }
+
+  render() {
+
+    return (
+      <View style={styles.container} >
+        <AdMobBanner
+          style={styles.banner}
+          bannerSize="mediumRectangle"
+          adUnitID={credentials.adMobUnitID}
+          onDidFailToReceiveAdWithError={this.bannerError} />
+
+      </View>
+    )
+  }
+}
+
+export default Banner

vds-app/App/screens/Splash.js

@@ -1,12 +1,15 @@
 import React from "react"
 import { View, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image } from "react-native"
+import { AdMobBanner } from "expo-ads-admob"
 
 import { Button, ButtonContainer } from "../components/Button"
-import { colors, texts } from "../components/Variables"
+import { colors, texts, credentials } from "../components/Variables"
 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: {
@@ -14,6 +17,26 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingHorizontal: 20
   },
+  bannerContainer: {
+    backgroundColor: colors.dark_blue,
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    height: screen.height-230
+  },
+  bannerContainerColapsed: {
+    backgroundColor: colors.dark_blue,
+    height: 300
+  },
+  banner: {
+    width: 300,
+    height: 250,
+    marginVertical: 20
+  },
   title: {
     color: colors.white,
     fontSize: 25,
@@ -29,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,
@@ -49,12 +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} >
@@ -85,14 +141,24 @@ class Splash extends React.Component {
                     color: colors.blue
                   })}
               />
-
-
             </ButtonContainer>
 
           </View>
 
         </SafeAreaView>
-
+        <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>
     )
   }

vds-app/app.json

@@ -17,6 +17,11 @@
       "fallbackToCacheTimeout": 10
     },
     "assetBundlePatterns": ["**/*"],
+    "android": {
+      "config": {
+        "googleMobileAdsAppId": "ca-app-pub-4145771316565790~1876877627"
+      }
+    },
     "ios": {
       "supportsTablet": true
     }

vds-app/package.json

@@ -9,8 +9,10 @@
   },
   "dependencies": {
     "expo": "^35.0.0",
+    "expo-ads-admob": "~7.0.0",
     "react": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
+    "react-native-admob": "1.3.2",
     "react-native-gesture-handler": "~1.3.0",
     "react-native-reanimated": "~1.2.0",
     "react-navigation": "^3.6.1"