update examples

ammarahm-ed · Jul 5, 2023 · 4e2825a · 4e2825a
1 parent e276958
commit 4e2825a
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 236 deletions.
diff --git a/example/index.js b/example/index.js
@@ -1,7 +1,7 @@
 /**
  * @format
  */
-import {AppRegistry} from 'react-native';
+import {AppRegistry, DeviceEventEmitter} from 'react-native';
 import {AdManager, TestIds} from 'react-native-admob-native-ads';
 import App from './App';
 import {name as appName} from './app.json';
@@ -55,4 +55,8 @@ AdManager.registerRepository({
   console.log('registered: ', result);
 });
 
+AdManager.subscribe('imageAd', 'onAdPreloadClicked', () => {
+  console.log('click', 'imageAd');
+});
+
 AppRegistry.registerComponent(appName, () => App);
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -280,7 +280,7 @@ PODS:
   - React-jsinspector (0.71.11)
   - React-logger (0.71.11):
     - glog
-  - react-native-admob-native-ads (0.6.1):
+  - react-native-admob-native-ads (0.6.4):
     - Google-Mobile-Ads-SDK
     - React-Core
   - react-native-tracking-transparency (0.1.2):
@@ -521,7 +521,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 089cd07c76ecf498960a64ba8ae0f2dddd382f44
   React-jsinspector: b6ed4cb3ffa27a041cd440300503dc512b761450
   React-logger: 186dd536128ae5924bc38ed70932c00aa740cd5b
-  react-native-admob-native-ads: f39c004b2903d344059f052e3d53308694cbae02
+  react-native-admob-native-ads: 3df173d98678bad9072a7576b09ac86259e816cb
   react-native-tracking-transparency: 25ff1ff866e338c137c818bdec20526bb05ffcc1
   React-perflogger: e706562ab7eb8eb590aa83a224d26fa13963d7f2
   React-RCTActionSheet: 57d4bd98122f557479a3359ad5dad8e109e20c5a

diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/src/AdView.js b/example/src/AdView.js
@@ -73,78 +73,13 @@ export const AdView = React.memo(({index, media, type, loadOnMount = true}) => {
     Logger('AD', 'LEFT', 'Ad left application');
   };
 
-  const onViewableItemsChanged = useCallback(
-    event => {
-      /**
-       * [STEP IV] We check if any AdViews are currently viewable.
-       */
-      let viewableAds = event.viewableItems.filter(
-        i => i.key.indexOf('ad') !== -1,
-      );
-
-      viewableAds.forEach(adView => {
-        if (adView.index === index && !loaded) {
-          /**
-           * [STEP V] If the ad is viewable and not loaded
-           * already, we will load the ad.
-           */
-          setLoading(true);
-          setLoaded(false);
-          setError(false);
-          Logger('AD', 'IN VIEW', 'Loading ' + index);
-          nativeAdRef.current?.loadAd();
-        } else {
-          /**
-           * We will not reload ads or load
-           * ads that are not viewable currently
-           * to save bandwidth and requests sent
-           * to server.
-           */
-          if (loaded) {
-            Logger('AD', 'IN VIEW', 'Loaded ' + index);
-          } else {
-            Logger('AD', 'NOT IN VIEW', index);
-          }
-        }
-      });
-    },
-    [index, loaded],
-  );
-
   useEffect(() => {
-    /**
-     * for previous steps go to List.js file.
-     *
-     * [STEP III] We will subscribe to onViewableItemsChanged event in all AdViews in the List.
-     */
-    let onViewableItemsChangedHandler;
-
-    if (!loadOnMount) {
-      onViewableItemsChangedHandler = DeviceEventEmitter.addListener(
-        Events.onViewableItemsChanged,
-        onViewableItemsChanged,
-      );
-    }
-
-    return () => {
-      if (!loadOnMount) {
-        onViewableItemsChangedHandler.remove();
-      }
-    };
-  }, [index, loadOnMount, loaded, onViewableItemsChanged]);
-
-  useEffect(() => {
-    if (loadOnMount || index <= 15) {
-      setLoading(true);
-      setLoaded(false);
-      setError(false);
+    if (!loaded) {
       nativeAdRef.current?.loadAd();
+    } else {
+      Logger('AD', 'LOADED ALREADY');
     }
-    return () => {
-      setLoaded(false);
-    };
-  }, [loadOnMount, index]);
-
+  }, [loaded]);
   return (
     <NativeAdView
       ref={nativeAdRef}
@@ -156,9 +91,8 @@ export const AdView = React.memo(({index, media, type, loadOnMount = true}) => {
       onNativeAdLoaded={onNativeAdLoaded}
       refreshInterval={60000 * 2}
       style={{
-        width: '98%',
+        width: '100%',
         alignSelf: 'center',
-        backgroundColor: 'transparent',
       }}
       videoOptions={{
         customControlsRequested: true,
@@ -184,7 +118,7 @@ export const AdView = React.memo(({index, media, type, loadOnMount = true}) => {
             opacity: !loading && !error && loaded ? 0 : 1,
             zIndex: !loading && !error && loaded ? 0 : 10,
           }}>
-          {loading && <ActivityIndicator size={28} color="#a9a9a9" />}
+          {!loading && <ActivityIndicator size={28} color="#a9a9a9" />}
           {error && <Text style={{color: '#a9a9a9'}}>:-(</Text>}
         </View>
 
@@ -193,10 +127,10 @@ export const AdView = React.memo(({index, media, type, loadOnMount = true}) => {
             height: 100,
             width: '100%',
             flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'flex-start',
+            alignItems: 'center',
             paddingHorizontal: 10,
             opacity: loading || error || !loaded ? 0 : 1,
+            maxWidth: '100%',
           }}>
           <IconView
             style={{
@@ -206,9 +140,8 @@ export const AdView = React.memo(({index, media, type, loadOnMount = true}) => {
           />
           <View
             style={{
-              flexGrow: 1,
-              flexShrink: 1,
               paddingHorizontal: 6,
+              flexShrink: 1,
             }}>
             <HeadlineView
               hello="abc"

diff --git a/example/src/List.js b/example/src/List.js
@@ -10,7 +10,7 @@ import {AdView} from './AdView';
 import {Events, listItemsGenerator} from './utils';
 
 let viewableItemsChanged = null;
-const dummyData = listItemsGenerator(10);
+const dummyData = listItemsGenerator(100);
 
 const List = () => {
   const renderItem = React.useCallback(
@@ -20,23 +20,21 @@ const List = () => {
          * loadOnMount -> We are telling the AdView to not load the ad when
          * it is mounted.
          */
-        <AdView loadOnMount={false} index={index} type="image" media={false} />
+        <AdView loadOnMount={false} index={index} type="image" media={true} />
       ) : (
         <View
           style={{
             borderBottomWidth: 1,
             borderBottomColor: 'orange',
             width: '100%',
             paddingHorizontal: 12,
-          }}
-        >
+          }}>
           <Text
             style={{
               paddingHorizontal: 12,
               height: 60,
               textAlignVertical: 'center',
-            }}
-          >
+            }}>
             {item}
           </Text>
         </View>
@@ -59,15 +57,6 @@ const List = () => {
     );
   }, []);
 
-  /**
-   * [STEP I] When viewable items change in the list
-   * we want to know what items are visible and store them
-   * in a variable for later us.
-   */
-  const onViewableItemsChanged = React.useCallback(e => {
-    viewableItemsChanged = e;
-  }, []);
-
   const keyExtractor = React.useCallback(item => item, []);
 
   return (
@@ -79,7 +68,6 @@ const List = () => {
         onScrollAnimationEnd={onScrollEnd}
         onMomentumScrollEnd={onScrollEnd}
         onScrollEndDrag={onScrollEnd}
-        onViewableItemsChanged={onViewableItemsChanged}
         renderItem={renderItem}
       />
     </View>
@@ -91,6 +79,7 @@ export default List;
 const styles = StyleSheet.create({
   list: {
     flex: 1,
+    width: '100%',
   },
   container: {
     height: '100%',