New ads system

shezz77 · Jul 9, 2020 · be5ef38 · be5ef38
1 parent 79bc5e6
commit be5ef38
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 32 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -25,7 +25,6 @@ const getNow = global.nativePerformanceNow ?? Date.now;
 
 export default function App() {
   const [loading, setLoading] = React.useState(true);
-
   React.useEffect(() => {
     StatusBar.setBarStyle("light-content", true);
     Fire.init();

diff --git a/client/src/components/AdMob.tsx b/client/src/components/AdMob.tsx
@@ -0,0 +1,41 @@
+import { AdMobBanner as NAdMobBanner } from "expo-ads-admob";
+import React from "react";
+import { Platform, StyleSheet } from "react-native";
+
+// todo: maybe just hardcode the adUnitID
+
+export const AdMobBanner = React.forwardRef(
+  (
+    { adUnitID, ...props }: React.ComponentProps<typeof NAdMobBanner>,
+    ref: any
+  ) => (
+    <NAdMobBanner
+      {...props}
+      adUnitID={
+        __DEV__
+          ? // Test IDs
+            Platform.select({
+              ios: "ca-app-pub-3940256099942544/2934735716",
+              android: "ca-app-pub-3940256099942544/6300978111",
+            })
+          : // Overridden ID
+            adUnitID
+      }
+      ref={ref}
+    />
+  )
+);
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    height: "100%",
+    flex: 1,
+  },
+  image: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#FFC266",
+  },
+});
diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
@@ -5,6 +5,7 @@ import * as Animatable from "react-native-animatable";
 import { useSafeArea } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 
+import { rewardAdUnitId } from "../constants/Ads";
 import Settings from "../constants/Settings";
 import GameStates from "../Game/GameStates";
 import useStoreReview from "../hooks/useStoreReview";
@@ -24,20 +25,13 @@ const delay = 100;
 const initialDelay = 100;
 const duration = 500;
 const easing = "ease-out";
-
-const adUnitId = Platform.select<string | null>({
-  ios: "ca-app-pub-2312569320461549/2517428180",
-  android: null, // todo: android
-  default: null,
-});
-
 function AdButton() {
   return (
     <Icon
       name="money"
       onPress={async () => {
         // Display a rewarded ad
-        await AdMobRewarded.setAdUnitID(adUnitId!);
+        await AdMobRewarded.setAdUnitID(rewardAdUnitId!);
         await AdMobRewarded.requestAdAsync();
         await AdMobRewarded.showAdAsync();
       }}
@@ -97,11 +91,13 @@ function Footer({ game, screenshot, navigation }) {
   if (!Settings.isPromo && supportsStoreReview) {
     views.push(<RateButton />);
   }
-  if (!Settings.isPromo && adUnitId) {
+  let adMargin = 0;
+  if (!Settings.isPromo && rewardAdUnitId) {
     views.push(<AdButton />);
+    adMargin += 48;
   }
   return (
-    <View style={[styles.container, { marginBottom: bottom }]}>
+    <View style={[styles.container, { marginBottom: bottom + adMargin }]}>
       {views.map((view, index) => {
         const _delay = index * delay;
         return (

diff --git a/client/src/constants/Ads.ts b/client/src/constants/Ads.ts
@@ -1,7 +1,15 @@
 import { Platform } from "react-native";
 
-export const adUnitId = Platform.select<string | null>({
-  ios: "ca-app-pub-2312569320461549/2517428180",
-  android: null, // todo: android
-  default: null,
-});
+// Test IDs iOS: https://developers.google.com/admob/ios/test-ads
+// Android: https://developers.google.com/admob/android/test-ads
+export const rewardAdUnitId = __DEV__
+  ? Platform.select<string | null>({
+      ios: "ca-app-pub-3940256099942544/1712485313",
+      android: "ca-app-pub-3940256099942544/5224354917",
+      default: null,
+    })
+  : Platform.select<string | null>({
+      ios: "ca-app-pub-2312569320461549/2517428180",
+      android: "ca-app-pub-2312569320461549/9830096940", // todo: android
+      default: null,
+    });
diff --git a/client/src/screens/GameScreen.tsx b/client/src/screens/GameScreen.tsx
@@ -1,22 +1,24 @@
-import { AdMobBanner } from "expo-ads-admob";
 import { Renderer } from "expo-three";
 import React from "react";
 import {
+  Clipboard,
   GestureResponderEvent,
   Image,
+  Platform,
   StyleSheet,
   Text,
   View,
 } from "react-native";
+import { useSafeArea } from "react-native-safe-area-context";
 
 import AchievementPopup from "../components/AchievementPopup";
+import { AdMobBanner } from "../components/AdMob";
 import Footer from "../components/Footer";
 import GraphicsView, { GLEvent, ResizeEvent } from "../components/GraphicsView";
 import Paused from "../components/Paused";
 import ScoreMeta from "../components/ScoreMeta";
 import Song from "../components/Song";
 import TouchableView from "../components/TouchableView";
-import * as Ads from "../constants/Ads";
 import Settings from "../constants/Settings";
 import Game from "../Game/Game";
 import useAppState from "../hooks/useAppState";
@@ -109,27 +111,14 @@ function GameView({ onLoad, isPaused }) {
 
 export default function GameScreen({ navigation }) {
   const [loading, setLoading] = React.useState(true);
-  const [showAd, setShowAd] = React.useState<boolean>(!!Ads.adUnitId);
-
   const appState = useAppState();
   const isPaused = appState !== "active";
 
-  const onBannerError = React.useCallback((data) => {
-    console.log("Banner error: ", data);
-    setShowAd(false);
-  }, []);
-
   return (
     <View style={styles.container} pointerEvents="box-none">
       <Song />
       <InputGameView onLoad={() => setLoading(false)} isPaused={isPaused} />
-      {showAd && (
-        <AdMobBanner
-          bannerSize="fullBanner"
-          adUnitID={Ads.adUnitId} // Test ID, Replace with your-admob-unit-id
-          onDidFailToReceiveAdWithError={onBannerError}
-        />
-      )}
+      <BottomBannerAd />
       <ScoreMeta />
       <Footer navigation={navigation} />
       {isPaused && <Paused />}
@@ -145,6 +134,36 @@ export default function GameScreen({ navigation }) {
   );
 }
 
+function BottomBannerAd() {
+  const [showAd, setShowAd] = React.useState<boolean>(false);
+  const { bottom } = useSafeArea();
+
+  const onBannerError = React.useCallback((errorDescription: string) => {
+    console.log("Banner error: ", errorDescription);
+    setShowAd(false);
+  }, []);
+
+  Clipboard.setString("");
+
+  // Test ID, Replace with your-admob-unit-id
+  const adUnitID = Platform.select({
+    ios: "ca-app-pub-2312569320461549/6612342018",
+    android: "ca-app-pub-2312569320461549/6685058859",
+  });
+
+  const display = showAd ? "flex" : "none";
+  return (
+    <View style={{ display, position: "absolute", bottom, left: 0, right: 0 }}>
+      <AdMobBanner
+        onAdViewDidReceiveAd={() => setShowAd(true)}
+        bannerSize="smartBannerPortrait"
+        adUnitID={adUnitID}
+        servePersonalizedAds
+        onDidFailToReceiveAdWithError={onBannerError}
+      />
+    </View>
+  );
+}
 function SkipGameViewInSimulator({ onLoad }) {
   return (
     <View