@vynix-org/react-native-ads-sdk 0.1.1

package/src/components/NativeStyles.ts

@@ -0,0 +1,141 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  container: {
+    width: '100%',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    overflow: 'hidden',
+    borderWidth: 1,
+    // alignItems: 'center',
+    borderColor: '#E5E5E5',
+  },
+  centerContent: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+    minHeight: 120,
+  },
+  loadingText: {
+    marginTop: 8,
+    fontSize: 13,
+    color: '#666',
+  },
+  errorText: {
+    fontSize: 13,
+    color: '#FF3B30',
+    textAlign: 'center',
+    marginBottom: 10,
+  },
+  retryButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 6,
+  },
+  retryText: {
+    color: '#FFFFFF',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  emptyText: {
+    fontSize: 13,
+    color: '#999',
+  },
+  adHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: '#F9F9F9',
+  },
+  adBadge: {
+    backgroundColor: '#FFCC00',
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 3,
+    fontSize: 10,
+    fontWeight: '700',
+    color: '#666',
+  },
+  advertiserText: {
+    fontSize: 11,
+    color: '#666',
+    fontWeight: '500',
+    flex: 1,
+    marginLeft: 8,
+    textAlign: 'right',
+  },
+  mediaView: {
+    minHeight: 180,
+    maxHeight: 250,
+    alignSelf: 'center',
+    backgroundColor: '#F0F0F0',
+  },
+  contentContainer: {
+    padding: 12,
+  },
+  headline: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#000',
+    marginBottom: 6,
+    lineHeight: 22,
+  },
+  bodyText: {
+    fontSize: 13,
+    color: '#666',
+    lineHeight: 18,
+    marginBottom: 10,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  ratingText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#FF9500',
+  },
+  priceText: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#34C759',
+  },
+  storeText: {
+    fontSize: 11,
+    color: '#999',
+    flex: 1,
+  },
+  ctaButton: {
+    backgroundColor: '#007AFF',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ctaText: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#FFFFFF',
+  },
+  iconContainer: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    overflow: 'hidden',
+    backgroundColor: '#F0F0F0',
+  },
+});

package/src/event/custom-event.ts

@@ -0,0 +1,30 @@
+export class CustomEventEmitter {
+  private events: { [key: string]: Function[] } = {};
+
+  on(event: string, listener: Function) {
+    if (!this.events[event]) {
+      this.events[event] = [];
+    }
+    this.events[event].push(listener);
+  }
+
+  emit(event: string, ...args: any[]) {
+    if (this.events[event]) {
+      this.events[event].forEach((listener) => listener(...args));
+    }
+  }
+
+  off(event: string, listener: Function) {
+    if (this.events[event]) {
+      this.events[event] = this.events[event].filter((l) => l !== listener);
+    }
+  }
+
+  removeAllListeners(event?: string) {
+    if (event) {
+      delete this.events[event];
+    } else {
+      this.events = {};
+    }
+  }
+}

package/src/hook/useAppOpenAd.ts

@@ -0,0 +1,161 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { AppState, type AppStateStatus } from 'react-native';
+import { appOpenAdsManager } from '../ads-manager/AppOpenAdsManager';
+
+interface UseAppOpenAdOptions {
+  adId: string;
+  showOnAppForeground?: boolean; // Tự động hiển thị khi app về foreground
+  autoLoad?: boolean; // Tự động load ad khi hook mount
+  onAdLoaded?: () => void;
+  onAdFailedToLoad?: (error: Error) => void;
+  onAdOpened?: () => void;
+  onAdClosed?: () => void;
+  onAdFailedToShow?: (error: Error) => void;
+}
+
+export const useAppOpenAd = (options: UseAppOpenAdOptions) => {
+  const {
+    adId,
+    showOnAppForeground = true,
+    autoLoad = true,
+    onAdLoaded,
+    onAdFailedToLoad,
+    onAdOpened,
+    onAdClosed,
+    onAdFailedToShow,
+  } = options;
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const appStateRef = useRef(AppState.currentState);
+  const isFirstLaunch = useRef(true);
+
+  // Sử dụng useRef để lưu callbacks, tránh re-render
+  const callbacksRef = useRef({
+    onAdLoaded,
+    onAdFailedToLoad,
+    onAdOpened,
+    onAdClosed,
+    onAdFailedToShow,
+  });
+
+  // Update callbacks ref khi có thay đổi
+  useEffect(() => {
+    callbacksRef.current = {
+      onAdLoaded,
+      onAdFailedToLoad,
+      onAdOpened,
+      onAdClosed,
+      onAdFailedToShow,
+    };
+  }, [onAdLoaded, onAdFailedToLoad, onAdOpened, onAdClosed, onAdFailedToShow]);
+
+  // Load ad function - chỉ phụ thuộc vào adId
+  const loadAd = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      await appOpenAdsManager.loadAd(
+        { adId },
+        {
+          onAdLoaded: () => {
+            setIsLoading(false);
+            setIsReady(true);
+            callbacksRef.current.onAdLoaded?.();
+          },
+          onAdFailedToLoad: (err) => {
+            setIsLoading(false);
+            setIsReady(false);
+            setError(err);
+            callbacksRef.current.onAdFailedToLoad?.(err);
+          },
+          onAdOpened: () => {
+            callbacksRef.current.onAdOpened?.();
+          },
+          onAdClosed: () => {
+            setIsReady(false);
+            callbacksRef.current.onAdClosed?.();
+          },
+          onAdFailedToShow: (err) => {
+            setError(err);
+            setIsReady(false);
+            callbacksRef.current.onAdFailedToShow?.(err);
+          },
+        }
+      );
+    } catch (err) {
+      setIsLoading(false);
+      setIsReady(false);
+      setError(err as Error);
+    }
+  }, [adId]); // Chỉ phụ thuộc vào adId
+
+  // Show ad function
+  const showAd = useCallback(async () => {
+    const success = await appOpenAdsManager.showAd();
+    if (!success) {
+      setIsReady(false);
+    }
+    return success;
+  }, []);
+
+  // Auto load on mount
+  useEffect(() => {
+    if (autoLoad) {
+      loadAd();
+    }
+
+    return () => {
+      // Cleanup when unmount
+      appOpenAdsManager.destroy();
+    };
+  }, [autoLoad, loadAd]);
+
+  // Handle app state changes
+  useEffect(() => {
+    if (!showOnAppForeground) {
+      return;
+    }
+
+    const subscription = AppState.addEventListener(
+      'change',
+      async (nextAppState: AppStateStatus) => {
+        // Skip first launch
+        if (isFirstLaunch.current) {
+          isFirstLaunch.current = false;
+          appStateRef.current = nextAppState;
+          return;
+        }
+
+        // App comes to foreground
+        if (
+          appStateRef.current?.match(/background/) &&
+          nextAppState === 'active'
+        ) {
+          if (appOpenAdsManager.isAdAvailable()) {
+            await showAd();
+          } else {
+            // Load new ad if not available
+            await loadAd();
+          }
+        }
+
+        appStateRef.current = nextAppState;
+      }
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, [showOnAppForeground, loadAd, showAd]);
+
+  return {
+    isLoading,
+    isReady,
+    error,
+    loadAd,
+    showAd,
+  };
+};

package/src/hook/useInterstitialAd.ts

@@ -0,0 +1,195 @@
+import { useEffect, useCallback } from 'react';
+import { useInterstitialAdStore } from '../stores/interstitial-ads-store';
+import {
+  AdStatus,
+  type UseInterstitialAdOptions,
+  type InterstitialAdConfig,
+} from '../types/ads-types';
+import { interstitialAdsManager } from '../ads-manager/InterstitialAdsManager';
+
+// Merge InterstitialAdConfig với UseInterstitialAdOptions
+type UseInterstitialAdConfig = InterstitialAdConfig & UseInterstitialAdOptions;
+
+export const useInterstitialAd = (config: UseInterstitialAdConfig) => {
+  const {
+    adKey,
+    adId,
+    timeout,
+    maxRetries,
+    adHighpriorityId,
+    showOnAppStateChange,
+    // UseInterstitialAdOptions fields
+    autoLoad = false,
+    onLoad,
+    onDisplay,
+    onError,
+    onClosed,
+    onOpened,
+    onClicked,
+  } = config;
+
+  // Zustand selectors
+  const ad = useInterstitialAdStore((state) => state.getAd(adKey));
+  const isLoading = useInterstitialAdStore((state) => state.isLoading(adKey));
+  const error = useInterstitialAdStore((state) => state.getError(adKey));
+  const isUsingHighPriority = useInterstitialAdStore((state) =>
+    state.isUsingHighPriority(adKey)
+  );
+  const hasTriedHighPriority = useInterstitialAdStore((state) =>
+    state.hasTriedHighPriority(adKey)
+  );
+
+  // Zustand actions
+  const preloadAd = useInterstitialAdStore((state) => state.preloadAd);
+  const loadAd = useInterstitialAdStore((state) => state.loadAd);
+  const displayAd = useInterstitialAdStore((state) => state.displayAd);
+  const removeAd = useInterstitialAdStore((state) => state.removeAd);
+  const refreshAd = useInterstitialAdStore((state) => state.refreshAd);
+
+  // Memoized callbacks
+  const handleLoadAd = useCallback(
+    async (customConfig?: Partial<InterstitialAdConfig>) => {
+      const finalConfig: InterstitialAdConfig = {
+        adKey,
+        adId,
+        showOnAppStateChange,
+        timeout,
+        maxRetries,
+        adHighpriorityId,
+        ...customConfig,
+      };
+      await loadAd(finalConfig);
+    },
+    [
+      adKey,
+      adId,
+      loadAd,
+      showOnAppStateChange,
+      timeout,
+      maxRetries,
+      adHighpriorityId,
+    ]
+  );
+
+  const handlePreloadAd = useCallback(
+    async (customConfig?: Partial<InterstitialAdConfig>) => {
+      const finalConfig: InterstitialAdConfig = {
+        adKey,
+        adId,
+        showOnAppStateChange,
+        timeout,
+        maxRetries,
+        adHighpriorityId,
+        ...customConfig,
+      };
+      await preloadAd(finalConfig);
+    },
+    [
+      adKey,
+      adId,
+      preloadAd,
+      showOnAppStateChange,
+      timeout,
+      maxRetries,
+      adHighpriorityId,
+    ]
+  );
+
+  const handleDisplayAd = useCallback(async () => {
+    const displayedAd = await displayAd(adKey);
+    if (displayedAd && onDisplay) {
+      onDisplay(displayedAd);
+    }
+    return displayedAd;
+  }, [adKey, displayAd, onDisplay]);
+
+  const handleRemoveAd = useCallback(() => {
+    removeAd(adKey);
+  }, [adKey, removeAd]);
+
+  const handleRefreshAd = useCallback(async () => {
+    await refreshAd(adKey);
+  }, [adKey, refreshAd]);
+
+  // Auto load effect
+  useEffect(() => {
+    if (autoLoad && !ad) {
+      handleLoadAd();
+    }
+  }, [autoLoad, ad, handleLoadAd]);
+
+  // Event callbacks
+  useEffect(() => {
+    if (ad?.status === AdStatus.LOADED && onLoad) {
+      onLoad(ad);
+    }
+  }, [ad?.status, ad, onLoad]);
+
+  useEffect(() => {
+    if (ad?.status === AdStatus.DISPLAYED && onDisplay) {
+      onDisplay(ad);
+    }
+  }, [ad?.status, ad, onDisplay]);
+
+  useEffect(() => {
+    if (ad?.status === AdStatus.ERROR && ad.error && onError) {
+      onError(ad.error, ad);
+    }
+  }, [ad?.status, ad, onError]);
+
+  // Thêm các event listeners mới cho các sự kiện từ Google Mobile Ads
+  useEffect(() => {
+    if (!ad) return;
+
+    // Lắng nghe sự kiện từ InterstitialAdsManager
+    const handleAdOpened = (openedAd: any) => {
+      if (openedAd.adKey === adKey && onOpened) {
+        onOpened(openedAd);
+      }
+    };
+
+    const handleAdClicked = (clickedAd: any) => {
+      if (clickedAd.adKey === adKey && onClicked) {
+        onClicked(clickedAd);
+      }
+    };
+
+    const handleAdClosed = (closedAd: any) => {
+      if (closedAd.adKey === adKey && onClosed) {
+        onClosed(closedAd);
+      }
+    };
+
+    // Đăng ký event listeners
+    interstitialAdsManager.on('adOpened', handleAdOpened);
+    interstitialAdsManager.on('adClicked', handleAdClicked);
+    interstitialAdsManager.on('adClosed', handleAdClosed);
+
+    // Cleanup listeners khi component unmount
+    return () => {
+      interstitialAdsManager.off('adOpened', handleAdOpened);
+      interstitialAdsManager.off('adClicked', handleAdClicked);
+      interstitialAdsManager.off('adClosed', handleAdClosed);
+    };
+  }, [adKey, onOpened, onClicked, onClosed, ad]);
+
+  return {
+    // State
+    ad,
+    isLoading,
+    error,
+    status: ad?.status || AdStatus.IDLE,
+    isLoaded: ad?.status === AdStatus.LOADED,
+    isDisplayed: ad?.status === AdStatus.DISPLAYED,
+    hasError: ad?.status === AdStatus.ERROR,
+    isUsingHighPriority,
+    hasTriedHighPriority,
+
+    // Actions
+    loadAd: handleLoadAd,
+    preloadAd: handlePreloadAd,
+    displayAd: handleDisplayAd,
+    removeAd: handleRemoveAd,
+    refreshAd: handleRefreshAd,
+  };
+};

package/src/hook/useNativeAd.ts

@@ -0,0 +1,173 @@
+import { useEffect, useCallback } from 'react';
+import { useNativeAdStore } from '../stores/native-ads-store';
+import {
+  AdStatus,
+  type UseNativeAdOptions,
+  type AdConfig,
+} from '../types/ads-types';
+import { nativeAdsManager } from '../ads-manager/NativeAdsManager';
+
+// Merge AdConfig với UseNativeAdOptions
+type UseNativeAdConfig = AdConfig & UseNativeAdOptions;
+
+export const useNativeAd = (config: UseNativeAdConfig) => {
+  const {
+    adKey,
+    adId,
+    timeout,
+    maxRetries,
+    adHighpriorityId,
+    // UseNativeAdOptions fields
+    autoLoad = false,
+    onLoad,
+    onDisplay,
+    onError,
+    onClicked,
+    onImpression,
+  } = config;
+
+  // Zustand selectors
+  const ad = useNativeAdStore((state) => state.getAd(adKey));
+  const isLoading = useNativeAdStore((state) => state.isLoading(adKey));
+  const error = useNativeAdStore((state) => state.getError(adKey));
+  const isUsingHighPriority = useNativeAdStore((state) =>
+    state.isUsingHighPriority(adKey)
+  );
+  const hasTriedHighPriority = useNativeAdStore((state) =>
+    state.hasTriedHighPriority(adKey)
+  );
+
+  // Zustand actions
+  const preloadAd = useNativeAdStore((state) => state.preloadAd);
+  const loadAd = useNativeAdStore((state) => state.loadAd);
+  const displayAd = useNativeAdStore((state) => state.displayAd);
+  const removeAd = useNativeAdStore((state) => state.removeAd);
+  const refreshAd = useNativeAdStore((state) => state.refreshAd);
+
+  // Memoized callbacks
+  const handleLoadAd = useCallback(
+    async (customConfig?: Partial<AdConfig>) => {
+      const finalConfig: AdConfig = {
+        adKey,
+        adId,
+        timeout,
+        maxRetries,
+        adHighpriorityId,
+        ...customConfig,
+      };
+      await loadAd(finalConfig);
+    },
+    [adKey, adId, timeout, maxRetries, adHighpriorityId, loadAd]
+  );
+
+  const handlePreloadAd = useCallback(
+    async (customConfig?: Partial<AdConfig>) => {
+      const finalConfig: AdConfig = {
+        adKey,
+        adId,
+        timeout,
+        maxRetries,
+        adHighpriorityId,
+        ...customConfig,
+      };
+      await preloadAd(finalConfig);
+    },
+    [adKey, adId, timeout, maxRetries, adHighpriorityId, preloadAd]
+  );
+
+  const handleDisplayAd = useCallback(async () => {
+    const displayedAd = await displayAd(adKey);
+    if (displayedAd && onDisplay) {
+      onDisplay(displayedAd);
+    }
+    return displayedAd;
+  }, [adKey, displayAd, onDisplay]);
+
+  const handleRemoveAd = useCallback(() => {
+    removeAd(adKey);
+  }, [adKey, removeAd]);
+
+  const handleRefreshAd = useCallback(async () => {
+    await refreshAd(adKey);
+  }, [adKey, refreshAd]);
+
+  // Auto load effect
+  useEffect(() => {
+    if (autoLoad && !ad) {
+      handleLoadAd();
+    }
+  }, [autoLoad, ad, handleLoadAd]);
+
+  // Event callbacks
+  useEffect(() => {
+    if (ad?.status === AdStatus.LOADED && onLoad) {
+      onLoad(ad);
+    }
+  }, [ad?.status, ad, onLoad]);
+
+  useEffect(() => {
+    if (ad?.status === AdStatus.DISPLAYED && onDisplay) {
+      onDisplay(ad);
+    }
+  }, [ad?.status, ad, onDisplay]);
+
+  useEffect(() => {
+    if (ad?.status === AdStatus.ERROR && ad.error && onError) {
+      onError(ad.error, ad);
+    }
+  }, [ad?.status, ad, onError]);
+
+  // Click event listener
+  useEffect(() => {
+    if (!ad || !onClicked) return;
+
+    const handleClick = (data: any) => {
+      if (data.adId === ad.adId) {
+        onClicked(ad);
+      }
+    };
+
+    nativeAdsManager.on('adClicked', handleClick);
+
+    return () => {
+      nativeAdsManager.off('adClicked', handleClick);
+    };
+  }, [ad, onClicked]);
+
+  // Impression event listener
+  useEffect(() => {
+    if (!ad || !onImpression) return;
+
+    const handleImpression = (data: any) => {
+      if (data.adId === ad.adId) {
+        onImpression(ad);
+      }
+    };
+
+    nativeAdsManager.on('adImpression', handleImpression);
+
+    return () => {
+      nativeAdsManager.off('adImpression', handleImpression);
+    };
+  }, [ad, onImpression]);
+
+  return {
+    // State
+    ad,
+    isLoading,
+    error,
+    status: ad?.status || AdStatus.IDLE,
+    isLoaded: ad?.status === AdStatus.LOADED,
+    isDisplayed: ad?.status === AdStatus.DISPLAYED,
+    hasError: ad?.status === AdStatus.ERROR,
+    isUsingHighPriority,
+    hasTriedHighPriority,
+
+    // Actions
+    loadAd: handleLoadAd,
+    preloadAd: handlePreloadAd,
+    displayAd: handleDisplayAd,
+    removeAd: handleRemoveAd,
+    refreshAd: handleRefreshAd,
+  };
+};