add separate screen banner

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-4145771316565790/1848957462",
+}

vds-app/App/index.js

@@ -1,12 +1,23 @@
 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"
 import { colors, texts} from "./components/Variables"
 
 const MainStack = createStackNavigator({
+  Banner: {
+    screen: Banner,
+    navigationOptions: ({ navigation }) => ({
+      header: null,
+      backgroundColor: colors.yellow,
+      headerStyle: {
+        backgroundColor: colors.yellow
+      }
+    })
+  },
   Splash: {
     screen: Splash,
     navigationOptions: ({ navigation }) => ({

vds-app/App/screens/Banner.js

@@ -0,0 +1,67 @@
+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: 300,
+    height: 250,
+    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.adMobUnitIDTest} // Test ID, Replace with your-admob-unit-id
+          //testDeviceID="EMULATOR"
+          onDidFailToReceiveAdWithError={this.bannerError} />
+
+      </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

@@ -86,6 +86,17 @@ class Splash extends React.Component {
                   })}
               />
 
+              <Button
+                text={"Banner"}
+                isBig={true}
+                onPress={() =>
+                  this.props.navigation.navigate("Banner", {
+                    title: texts.exam,
+                    questions: examQuestions,
+                    color: colors.blue
+                  })}
+              />
+
 
             </ButtonContainer>