@vynix-org/react-native-ads-sdk 0.2.2 → 0.2.4

package/src/components/NativeAdComponent.tsx

@@ -52,7 +52,7 @@ export const NativeAdComponent: React.FC<NativeAdComponentProps> = ({
   headlineStyles,
   bodyStyles,
 }) => {
-  const { ad, isLoading, error, isLoaded } = useNativeAd({
+  const { ad, isLoading, error, isLoaded, isRefreshing } = useNativeAd({
     adKey,
     adId,
     autoLoad,
@@ -63,8 +63,15 @@ export const NativeAdComponent: React.FC<NativeAdComponentProps> = ({
     onImpression,
   });
 
-  // Render loading state
-  if (isLoading) {
+  // useEffect(() => {
+  //   loadAd();
+  // }, [loadAd]);
+
+  const hasNativeAd = Boolean(ad?.data?.nativeAd);
+  const shouldShowSkeleton = !hasNativeAd && isLoading;
+
+  // Render loading state (only when chưa có dữ liệu cũ)
+  if (shouldShowSkeleton) {
     return (
       <View style={[styles.wrapper, style]}>
         <View style={[styles.container, styles.centerContent]}>
@@ -75,90 +82,97 @@ export const NativeAdComponent: React.FC<NativeAdComponentProps> = ({
     );
   }
 
-  // Render error state
-  if (error) {
-    return null;
-  }
-
   // Render empty state
-  if (!isLoaded || !ad?.data?.nativeAd) {
+  if (!ad || !isLoaded || !hasNativeAd || error) {
     return null;
   }
 
-  const nativeAd = ad.data.nativeAd as NativeAd;
+  const nativeAd = ad.data?.nativeAd as NativeAd;
 
   return (
     <View style={[styles.wrapper, style]}>
-      <NativeAdView nativeAd={nativeAd} style={[styles.container]}>
-        {/* Ad Badge và Advertiser */}
-        <View style={styles.adHeader}>
-          {nativeAd.advertiser && (
-            <NativeAsset assetType={NativeAssetType.ADVERTISER}>
-              <Text style={styles.advertiserText} numberOfLines={1}>
-                {nativeAd.advertiser}
-              </Text>
+      <View style={styles.overlayContainer}>
+        <NativeAdView
+          key={nativeAd.responseId}
+          nativeAd={nativeAd}
+          style={[styles.container]}
+        >
+          {/* Ad Badge và Advertiser */}
+          <View style={styles.adHeader}>
+            {/* {nativeAd.advertiser && (
+              <NativeAsset assetType={NativeAssetType.ADVERTISER}>
+                <Text style={styles.advertiserText} numberOfLines={1}>
+                  {nativeAd.advertiser}
+                </Text>
+              </NativeAsset>
+            )} */}
+          </View>
+
+          {nativeAd.callToAction && (
+            <NativeAsset assetType={NativeAssetType.CALL_TO_ACTION}>
+              <View style={[styles.ctaButton, buttonActionStyles]}>
+                <Text style={styles.ctaText}>{nativeAd.callToAction}</Text>
+              </View>
             </NativeAsset>
           )}
-        </View>
 
-        {nativeAd.callToAction && (
-          <NativeAsset assetType={NativeAssetType.CALL_TO_ACTION}>
-            <View style={[styles.ctaButton, buttonActionStyles]}>
-              <Text style={styles.ctaText}>{nativeAd.callToAction}</Text>
-            </View>
-          </NativeAsset>
-        )}
-
-        {/* Media View - Hiển thị ảnh hoặc video */}
-        {((nativeAd.images?.length && nativeAd.images.length > 0) ||
-          nativeAd.mediaContent) && (
-          <NativeMediaView
-            style={[
-              styles.mediaView,
-              nativeAd.mediaContent?.aspectRatio
-                ? { aspectRatio: nativeAd.mediaContent.aspectRatio }
-                : { aspectRatio: 16 / 9 },
-            ]}
-          />
-        )}
+          {/* Media View - Hiển thị ảnh hoặc video */}
+          {((nativeAd.images?.length && nativeAd.images.length > 0) ||
+            nativeAd.mediaContent) && (
+            <NativeMediaView
+              style={[
+                styles.mediaView,
+                nativeAd.mediaContent?.aspectRatio
+                  ? { aspectRatio: nativeAd.mediaContent.aspectRatio }
+                  : { aspectRatio: 16 / 9 },
+              ]}
+            />
+          )}
 
-        {/* Ad Content */}
-        <View style={styles.contentContainer}>
-          {nativeAd.icon && (
-            <NativeAsset assetType={NativeAssetType.ICON}>
-              <View style={styles.iconContainer}>
-                <Image
-                  source={{ uri: nativeAd.icon?.url }}
-                  style={styles.icon}
-                />
+          {/* Ad Content */}
+          <View style={styles.contentContainer}>
+            {nativeAd.icon && (
+              <NativeAsset assetType={NativeAssetType.ICON}>
+                <View style={styles.iconContainer}>
+                  <Image
+                    source={{ uri: nativeAd.icon?.url }}
+                    style={styles.icon}
+                  />
+                </View>
+              </NativeAsset>
+            )}
+            <View style={styles.contentBody}>
+              <View style={styles.vHeader}>
+                <Text style={[styles.adBadge, adBadgeStyles]}>Ad</Text>
+                {nativeAd.headline && (
+                  <NativeAsset assetType={NativeAssetType.HEADLINE}>
+                    <Text
+                      style={[styles.headline, headlineStyles]}
+                      numberOfLines={1}
+                    >
+                      {nativeAd.headline}
+                    </Text>
+                  </NativeAsset>
+                )}
               </View>
-            </NativeAsset>
-          )}
-          <View style={{ flex: 1 }}>
-            <View style={styles.vHeader}>
-              <Text style={[styles.adBadge, adBadgeStyles]}>Ad</Text>
-              {nativeAd.headline && (
-                <NativeAsset assetType={NativeAssetType.HEADLINE}>
-                  <Text
-                    style={[styles.headline, headlineStyles]}
-                    numberOfLines={1}
-                  >
-                    {nativeAd.headline}
+
+              {nativeAd.body && (
+                <NativeAsset assetType={NativeAssetType.BODY}>
+                  <Text numberOfLines={2} style={[styles.bodyText, bodyStyles]}>
+                    {nativeAd.body}
                   </Text>
                 </NativeAsset>
               )}
             </View>
-
-            {nativeAd.body && (
-              <NativeAsset assetType={NativeAssetType.BODY}>
-                <Text numberOfLines={2} style={[styles.bodyText, bodyStyles]}>
-                  {nativeAd.body}
-                </Text>
-              </NativeAsset>
-            )}
           </View>
-        </View>
-      </NativeAdView>
+        </NativeAdView>
+        {isRefreshing && (
+          <View style={styles.refreshOverlay}>
+            <ActivityIndicator size="small" color="#FFFFFF" />
+            <Text style={styles.refreshText}>Đang tải quảng cáo mới...</Text>
+          </View>
+        )}
+      </View>
     </View>
   );
 };

package/src/components/NativeStyles.ts

@@ -5,6 +5,10 @@ export const styles = StyleSheet.create({
     width: '100%',
     alignItems: 'center',
   },
+  overlayContainer: {
+    width: '100%',
+    position: 'relative',
+  },
   container: {
     width: '100%',
     backgroundColor: '#FFFFFF',
@@ -82,6 +86,9 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     padding: 12,
   },
+  contentBody: {
+    flex: 1,
+  },
   headline: {
     fontSize: 16,
     fontWeight: '700',
@@ -146,4 +153,17 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  refreshOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  refreshText: {
+    marginTop: 8,
+    fontSize: 12,
+    color: '#FFFFFF',
+    fontWeight: '500',
+  },
 });

package/src/hook/useNativeAd.ts

@@ -6,6 +6,7 @@ import {
   type AdConfig,
 } from '../types/ads-types';
 import { nativeAdsManager } from '../ads-manager/NativeAdsManager';
+// import { AppState, type AppStateStatus } from 'react-native';
 
 // Merge AdConfig với UseNativeAdOptions
 type UseNativeAdConfig = AdConfig & UseNativeAdOptions;
@@ -36,6 +37,7 @@ export const useNativeAd = (config: UseNativeAdConfig) => {
   const hasTriedHighPriority = useNativeAdStore((state) =>
     state.hasTriedHighPriority(adKey)
   );
+  const isRefreshing = useNativeAdStore((state) => state.isRefreshing(adKey));
 
   // Zustand actions
   const preloadAd = useNativeAdStore((state) => state.preloadAd);
@@ -91,6 +93,31 @@ export const useNativeAd = (config: UseNativeAdConfig) => {
     await refreshAd(adKey);
   }, [adKey, refreshAd]);
 
+  // const appStateRef = useRef(AppState.currentState);
+
+  // useEffect(() => {
+  //   if (!ad) return; // Chỉ refresh nếu đã có ad
+
+  //   const subscription = AppState.addEventListener(
+  //     'change',
+  //     async (nextAppState: AppStateStatus) => {
+  //       // Khi app chuyển từ background/inactive sang active
+  //       if (
+  //         appStateRef.current?.match(/inactive|background/) &&
+  //         nextAppState === 'active'
+  //       ) {
+  //         await handleRefreshAd();
+  //       }
+
+  //       appStateRef.current = nextAppState;
+  //     }
+  //   );
+
+  //   return () => {
+  //     subscription.remove();
+  //   };
+  // }, [ad, handleRefreshAd]);
+
   // Auto load effect
   useEffect(() => {
     if (autoLoad && !ad) {
@@ -121,8 +148,9 @@ export const useNativeAd = (config: UseNativeAdConfig) => {
   useEffect(() => {
     if (!ad || !onClicked) return;
 
-    const handleClick = (data: any) => {
-      if (data.adId === ad.adId) {
+    const handleClick = (data: { adKey?: string; adId?: string }) => {
+      if (data.adKey === ad.adKey) {
+        handleRefreshAd();
         onClicked(ad);
       }
     };
@@ -132,14 +160,14 @@ export const useNativeAd = (config: UseNativeAdConfig) => {
     return () => {
       nativeAdsManager.off('adClicked', handleClick);
     };
-  }, [ad, onClicked]);
+  }, [ad, onClicked, handleRefreshAd]);
 
   // Impression event listener
   useEffect(() => {
     if (!ad || !onImpression) return;
 
-    const handleImpression = (data: any) => {
-      if (data.adId === ad.adId) {
+    const handleImpression = (data: { adKey?: string; adId?: string }) => {
+      if (data.adKey === ad.adKey) {
         onImpression(ad);
       }
     };
@@ -160,6 +188,7 @@ export const useNativeAd = (config: UseNativeAdConfig) => {
     isLoaded: ad?.status === AdStatus.LOADED,
     isDisplayed: ad?.status === AdStatus.DISPLAYED,
     hasError: ad?.status === AdStatus.ERROR,
+    isRefreshing,
     isUsingHighPriority,
     hasTriedHighPriority,
 

package/src/stores/native-ads-store.ts

@@ -9,6 +9,7 @@ interface NativeAdStore {
   ads: Map<string, AdInstance>;
   loadingKeys: Set<string>;
   errors: Map<string, string>;
+  refreshingKeys: Set<string>;
 
   // Actions - CHỈ NHẬN CONFIG OBJECT
   preloadAd: (config: AdConfig) => Promise<void>;
@@ -27,11 +28,13 @@ interface NativeAdStore {
   getErrorAds: () => AdInstance[];
   isUsingHighPriority: (adKey: string) => boolean;
   hasTriedHighPriority: (adKey: string) => boolean;
+  isRefreshing: (adKey: string) => boolean;
 
   // Internal actions
   _updateAd: (ad: AdInstance) => void;
   _removeAd: (adKey: string) => void;
   _setLoading: (adKey: string, loading: boolean) => void;
+  _setRefreshing: (adKey: string, refreshing: boolean) => void;
   _setError: (adKey: string, error: string | null) => void;
   _clearError: (adKey: string) => void;
 }
@@ -42,6 +45,7 @@ export const useNativeAdStore = create<NativeAdStore>()(
     ads: new Map(),
     loadingKeys: new Set(),
     errors: new Map(),
+    refreshingKeys: new Set(),
 
     // Public actions
     preloadAd: async (config) => {
@@ -94,7 +98,8 @@ export const useNativeAdStore = create<NativeAdStore>()(
 
     refreshAd: async (adKey) => {
       try {
-        get()._setLoading(adKey, true);
+        // get()._setLoading(adKey, true);
+        get()._setRefreshing(adKey, true);
         get()._clearError(adKey);
 
         await nativeAdsManager.refreshAd(adKey);
@@ -109,7 +114,8 @@ export const useNativeAdStore = create<NativeAdStore>()(
         get()._setError(adKey, errorMessage);
         console.error(`Failed to refresh ad ${adKey}:`, errorMessage);
       } finally {
-        get()._setLoading(adKey, false);
+        // get()._setLoading(adKey, false);
+        get()._setRefreshing(adKey, false);
       }
     },
 
@@ -119,6 +125,7 @@ export const useNativeAdStore = create<NativeAdStore>()(
         ads: new Map(),
         loadingKeys: new Set(),
         errors: new Map(),
+        refreshingKeys: new Set(),
       });
     },
 
@@ -161,6 +168,10 @@ export const useNativeAdStore = create<NativeAdStore>()(
       return ad?.hasTriedHighPriority || false;
     },
 
+    isRefreshing: (adKey) => {
+      return get().refreshingKeys.has(adKey);
+    },
+
     // Internal actions - GIỮ NGUYÊN
     _updateAd: (ad) => {
       set((state) => ({
@@ -173,15 +184,18 @@ export const useNativeAdStore = create<NativeAdStore>()(
         const newAds = new Map(state.ads);
         const newLoadingKeys = new Set(state.loadingKeys);
         const newErrors = new Map(state.errors);
+        const newRefreshing = new Set(state.refreshingKeys);
 
         newAds.delete(adKey);
         newLoadingKeys.delete(adKey);
         newErrors.delete(adKey);
+        newRefreshing.delete(adKey);
 
         return {
           ads: newAds,
           loadingKeys: newLoadingKeys,
           errors: newErrors,
+          refreshingKeys: newRefreshing,
         };
       });
     },
@@ -198,6 +212,18 @@ export const useNativeAdStore = create<NativeAdStore>()(
       });
     },
 
+    _setRefreshing: (adKey, refreshing) => {
+      set((state) => {
+        const newRefreshing = new Set(state.refreshingKeys);
+        if (refreshing) {
+          newRefreshing.add(adKey);
+        } else {
+          newRefreshing.delete(adKey);
+        }
+        return { refreshingKeys: newRefreshing };
+      });
+    },
+
     _setError: (adKey, error) => {
       set((state) => {
         const newErrors = new Map(state.errors);
@@ -233,23 +259,32 @@ const setupNativeListeners = () => {
   nativeAdsManager.on('adLoaded', (ad: AdInstance) => {
     useNativeAdStore.getState()._updateAd(ad);
     useNativeAdStore.getState()._setLoading(ad.adKey, false);
+    useNativeAdStore.getState()._setRefreshing(ad.adKey, false);
     useNativeAdStore.getState()._clearError(ad.adKey);
   });
 
   nativeAdsManager.on('adDisplayed', (ad: AdInstance) => {
     useNativeAdStore.getState()._updateAd(ad);
+    useNativeAdStore.getState()._setRefreshing(ad.adKey, false);
   });
 
   nativeAdsManager.on('adError', (ad: AdInstance) => {
     useNativeAdStore.getState()._updateAd(ad);
     useNativeAdStore.getState()._setLoading(ad.adKey, false);
+    useNativeAdStore.getState()._setRefreshing(ad.adKey, false);
     useNativeAdStore
       .getState()
       ._setError(ad.adKey, ad.error || 'Unknown error');
   });
 
+  nativeAdsManager.on('adRefreshing', (ad: AdInstance) => {
+    useNativeAdStore.getState()._updateAd(ad);
+    useNativeAdStore.getState()._setRefreshing(ad.adKey, true);
+  });
+
   nativeAdsManager.on('adRemoved', (adKey: string) => {
     useNativeAdStore.getState()._removeAd(adKey);
+    useNativeAdStore.getState()._setRefreshing(adKey, false);
   });
 
   nativeAdsManager.on('allAdsCleared', () => {

package/src/types/ads-types.ts

@@ -1,6 +1,7 @@
 export enum AdStatus {
   IDLE = 'idle',
   LOADING = 'loading',
+  REFRESHING = 'refreshing',
   LOADED = 'loaded',
   DISPLAYED = 'displayed',
   ERROR = 'error',
@@ -45,12 +46,14 @@ export interface AdInstance {
   retryCount: number;
   isUsingHighPriority?: boolean; // Track xem đang load high priority hay không
   hasTriedHighPriority?: boolean; // Track xem đã thử high priority chưa
+  isRefreshing?: boolean;
 }
 
 export interface AdManagerState {
   ads: Map<string, AdInstance>;
   loadingKeys: Set<string>;
   displayedKeys: Set<string>;
+  refreshingKeys: Set<string>;
 }
 
 export interface AdManagerActions {
@@ -164,6 +167,7 @@ export interface GenericAdManagerState {
   ads: Map<string, AnyAdInstance>;
   loadingKeys: Set<string>;
   displayedKeys: Set<string>;
+  refreshingKeys: Set<string>;
 }
 
 export interface GenericAdManagerActions {