feat: improve paid option example

react-native-admob · Nov 4, 2021 · 77513c6 · 77513c6
1 parent 144669c
commit 77513c6
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 54 deletions.
diff --git a/example/src/examples/AppOpenAdExample.tsx b/example/src/examples/AppOpenAdExample.tsx
@@ -1,15 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { View } from 'react-native';
 import RNBootSplash from 'react-native-bootsplash';
 import { useAppOpenAd } from '@react-native-admob/admob';
 
+import PaidContext from '../PaidContext';
+
 interface AppOpenAdExampleProps {
   onSplashDismissed: () => void;
 }
 
 const AppOpenAdExample = ({ onSplashDismissed }: AppOpenAdExampleProps) => {
   const [loaded, setLoaded] = useState(false);
   const { adDismissed, adLoadError } = useAppOpenAd();
+  const { isPaid } = useContext(PaidContext);
 
   useEffect(() => {
     const load = async () => {
@@ -24,10 +27,10 @@ const AppOpenAdExample = ({ onSplashDismissed }: AppOpenAdExampleProps) => {
       await RNBootSplash.hide({ fade: true });
       onSplashDismissed();
     }
-    if (loaded && (adDismissed || adLoadError)) {
+    if (isPaid || (loaded && (adDismissed || adLoadError))) {
       hide();
     }
-  }, [loaded, adDismissed, adLoadError, onSplashDismissed]);
+  }, [loaded, adDismissed, adLoadError, onSplashDismissed, isPaid]);
 
   return <View />;
 };

diff --git a/example/src/examples/BannerAdExample.tsx b/example/src/examples/BannerAdExample.tsx
@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
-import { Button } from 'react-native';
+import React, { useContext, useRef } from 'react';
+import { Button, Text } from 'react-native';
 import {
   BannerAd,
   BannerAdSize,
@@ -8,49 +8,68 @@ import {
 } from '@react-native-admob/admob';
 
 import ExampleGroup from '../components/ExampleGroup';
+import PaidContext from '../PaidContext';
 
 const UNIT_ID_GAM_BANNER = '/6499/example/banner';
 
+const AdSpace = ({
+  isPaid,
+  children,
+}: {
+  isPaid: boolean;
+  children: React.ReactNode;
+}) => (isPaid ? <Text>Ad was removed</Text> : <>{children}</>);
+
 const BannerAdExample = () => {
   const bannerRef = useRef<BannerAd>(null);
   const adaptiveBannerRef = useRef<BannerAd>(null);
   const gamBannerRef = useRef<GAMBannerAd>(null);
+  const { isPaid } = useContext(PaidContext);
 
   return (
     <>
-      <ExampleGroup title="AdMob - Basic">
-        <BannerAd
-          size={BannerAdSize.BANNER}
-          unitId={TestIds.BANNER}
-          onAdLoaded={() => console.log('Banner Ad loaded!')}
-          ref={bannerRef}
-        />
-        <Button title="Reload" onPress={() => bannerRef.current?.loadAd()} />
+      <ExampleGroup title="Banner - Basic">
+        <AdSpace isPaid={isPaid}>
+          <BannerAd
+            size={BannerAdSize.BANNER}
+            unitId={TestIds.BANNER}
+            onAdLoaded={() => console.log('Banner Ad loaded!')}
+            ref={bannerRef}
+          />
+          <Button title="Reload" onPress={() => bannerRef.current?.loadAd()} />
+        </AdSpace>
       </ExampleGroup>
       <ExampleGroup title="Adaptive Banner">
-        <BannerAd
-          size={BannerAdSize.ADAPTIVE_BANNER}
-          unitId={TestIds.BANNER}
-          ref={adaptiveBannerRef}
-          requestOptions={{
-            requestNonPersonalizedAdsOnly: true,
-          }}
-        />
-        <Button
-          title="Reload"
-          onPress={() => adaptiveBannerRef.current?.loadAd()}
-        />
+        <AdSpace isPaid={isPaid}>
+          <BannerAd
+            size={BannerAdSize.ADAPTIVE_BANNER}
+            unitId={TestIds.BANNER}
+            ref={adaptiveBannerRef}
+            requestOptions={{
+              requestNonPersonalizedAdsOnly: true,
+            }}
+          />
+          <Button
+            title="Reload"
+            onPress={() => adaptiveBannerRef.current?.loadAd()}
+          />
+        </AdSpace>
       </ExampleGroup>
       <ExampleGroup title="Ad Manager Banner">
-        <GAMBannerAd
-          sizes={[BannerAdSize.BANNER, BannerAdSize.MEDIUM_RECTANGLE]}
-          onSizeChange={(size) => {
-            console.log(size);
-          }}
-          unitId={UNIT_ID_GAM_BANNER}
-          ref={gamBannerRef}
-        />
-        <Button title="Reload" onPress={() => gamBannerRef.current?.loadAd()} />
+        <AdSpace isPaid={isPaid}>
+          <GAMBannerAd
+            sizes={[BannerAdSize.BANNER, BannerAdSize.MEDIUM_RECTANGLE]}
+            onSizeChange={(size) => {
+              console.log(size);
+            }}
+            unitId={UNIT_ID_GAM_BANNER}
+            ref={gamBannerRef}
+          />
+          <Button
+            title="Reload"
+            onPress={() => gamBannerRef.current?.loadAd()}
+          />
+        </AdSpace>
       </ExampleGroup>
     </>
   );

diff --git a/example/src/examples/FullScreenAdExamples/ClassComponentExample.tsx b/example/src/examples/FullScreenAdExamples/ClassComponentExample.tsx
@@ -1,46 +1,56 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Button } from 'react-native';
 import { InterstitialAd, TestIds } from '@react-native-admob/admob';
 import { useNavigation } from '@react-navigation/native';
 
 import { RootStackNavigationProps } from '../../App';
 import ExampleGroup from '../../components/ExampleGroup';
+import PaidContext from '../../PaidContext';
 
 interface State {
   adLoaded: boolean;
-  interstitialAd: InterstitialAd;
+  interstitialAd: InterstitialAd | null;
 }
 
 class ClassComponentExample extends React.Component<{
   navigation: RootStackNavigationProps<'Examples'>;
+  isPaid: boolean;
 }> {
   state: State = {
     adLoaded: false,
-    interstitialAd: InterstitialAd.createAd(TestIds.INTERSTITIAL_VIDEO, {
-      loadOnDismissed: true,
-      requestOptions: {
-        requestNonPersonalizedAdsOnly: true,
-      },
-    }),
+    interstitialAd: this.props.isPaid
+      ? null
+      : InterstitialAd.createAd(TestIds.INTERSTITIAL_VIDEO, {
+          loadOnDismissed: true,
+          requestOptions: {
+            requestNonPersonalizedAdsOnly: true,
+          },
+        }),
   };
   componentDidMount() {
-    this.state.interstitialAd.addEventListener('adLoaded', () => {
+    this.state.interstitialAd?.addEventListener('adLoaded', () => {
       this.setState({ adLoaded: true });
     });
-    this.state.interstitialAd.addEventListener('adDismissed', () => {
+    this.state.interstitialAd?.addEventListener('adDismissed', () => {
       this.props.navigation.navigate('Second');
     });
   }
   componentWillUnmount() {
-    this.state.interstitialAd.removeAllListeners();
+    this.state.interstitialAd?.removeAllListeners();
   }
   render() {
     return (
       <ExampleGroup title="Interstitial">
         <Button
           title="Show Interstitial Ad and move to next screen"
           disabled={!this.state.adLoaded}
-          onPress={() => this.state.interstitialAd.show()}
+          onPress={() => {
+            if (this.props.isPaid) {
+              this.props.navigation.navigate('Second');
+            } else {
+              this.state.interstitialAd?.show();
+            }
+          }}
         />
       </ExampleGroup>
     );
@@ -49,5 +59,6 @@ class ClassComponentExample extends React.Component<{
 
 export default function () {
   const navigation = useNavigation<RootStackNavigationProps<'Examples'>>();
-  return <ClassComponentExample navigation={navigation} />;
+  const { isPaid } = useContext(PaidContext);
+  return <ClassComponentExample navigation={navigation} isPaid={isPaid} />;
 }
diff --git a/example/src/screens/ExamplesScreen.tsx b/example/src/screens/ExamplesScreen.tsx
@@ -11,13 +11,9 @@ const ExamplesScreen = () => {
   return (
     <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
       <ScrollView>
-        {!isPaid && (
-          <>
-            <BannerAdExample />
-            <ClassComponentExample />
-            <FunctionComponentExample />
-          </>
-        )}
+        <BannerAdExample />
+        <ClassComponentExample />
+        <FunctionComponentExample />
         <Button
           title={`${isPaid ? 'En' : 'Dis'}able Ads`}
           onPress={() => onPaidChange(!isPaid)}