banner integration in splash

vds-app/App/components/Variables.js

@@ -48,5 +48,5 @@ export const examScheme = [
 
 export const credentials = {
   adMobUnitIDTest: "ca-app-pub-3940256099942544/6300978111",
-  adMobUnitID: "ca-app-pub-4145771316565790/1848957462",
+  adMobUnitID: "ca-app-pub-3940256099942544/6300978111" //  "ca-app-pub-4145771316565790/1848957462",
 }

vds-app/App/index.js

@@ -8,8 +8,8 @@ import Exam from "./screens/Exam"
 import { colors, texts} from "./components/Variables"
 
 const MainStack = createStackNavigator({
-  Banner: {
-    screen: Banner,
+  Splash: {
+    screen: Splash,
     navigationOptions: ({ navigation }) => ({
       header: null,
       backgroundColor: colors.yellow,
@@ -18,8 +18,8 @@ const MainStack = createStackNavigator({
       }
     })
   },
-  Splash: {
-    screen: Splash,
+  Banner: {
+    screen: Banner,
     navigationOptions: ({ navigation }) => ({
       header: null,
       backgroundColor: colors.yellow,

vds-app/App/screens/Banner.js

@@ -25,8 +25,8 @@ const styles = StyleSheet.create({
     paddingVertical: 20
   },
   banner: {
-    width: 300,
-    height: 250,
+    width: "100%",
+    height: "100%",
     marginVertical: 20
   },
 })
@@ -48,8 +48,7 @@ class Banner extends React.Component {
         <AdMobBanner
           style={styles.banner}
           bannerSize="mediumRectangle"
-          adUnitID={credentials.adMobUnitIDTest} // Test ID, Replace with your-admob-unit-id
-          //testDeviceID="EMULATOR"
+          adUnitID={credentials.adMobUnitID}
           onDidFailToReceiveAdWithError={this.bannerError} />
 
       </View>

vds-app/App/screens/Splash.js

@@ -1,8 +1,9 @@
 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 { 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")
@@ -14,6 +15,21 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingHorizontal: 20
   },
+  bannerContainer: {
+    backgroundColor: colors.white,
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  banner: {
+    width: 300,
+    height: 250,
+    marginVertical: 20
+  },
   title: {
     color: colors.white,
     fontSize: 25,
@@ -52,6 +68,10 @@ class Splash extends React.Component {
     results: false
   }
 
+  bannerError = (e) => {
+    console.log("Banner error: ", e)
+  }
+
 
   render() {
 
@@ -85,25 +105,18 @@ class Splash extends React.Component {
                     color: colors.blue
                   })}
               />
-
-              <Button
-                text={"Banner"}
-                isBig={true}
-                onPress={() =>
-                  this.props.navigation.navigate("Banner", {
-                    title: texts.exam,
-                    questions: examQuestions,
-                    color: colors.blue
-                  })}
-              />
-
-
             </ButtonContainer>
 
           </View>
 
         </SafeAreaView>
-
+        <View style={styles.bannerContainer}>
+          <AdMobBanner
+            style={styles.banner}
+            bannerSize="mediumRectangle"
+            adUnitID={credentials.adMobUnitID}
+            onDidFailToReceiveAdWithError={this.bannerError} />
+        </View>
       </View>
     )
   }