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

package/src/components/FullscreenStyles.ts

@@ -0,0 +1,158 @@
+import { StyleSheet, Dimensions } from 'react-native';
+
+const { width, height } = Dimensions.get('window');
+
+export const fullscreenStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: width,
+    height: height,
+    backgroundColor: '#000000',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  adContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#000000',
+  },
+  centerContent: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 50,
+    right: 20,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+  },
+  closeButtonText: {
+    color: '#FFFFFF',
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  loadingText: {
+    marginTop: 16,
+    fontSize: 16,
+    color: '#FFFFFF',
+  },
+  errorText: {
+    fontSize: 16,
+    color: '#FF3B30',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  retryButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+  },
+  retryText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  emptyText: {
+    fontSize: 16,
+    color: '#999',
+  },
+  adHeader: {
+    position: 'absolute',
+    top: 50,
+    left: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 6,
+    zIndex: 998,
+    maxWidth: width - 100,
+  },
+  adBadge: {
+    backgroundColor: '#FFCC00',
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#000',
+  },
+  advertiserText: {
+    fontSize: 12,
+    color: '#FFFFFF',
+    fontWeight: '500',
+    marginLeft: 10,
+  },
+  mediaView: {
+    width: '100%',
+    backgroundColor: '#1A1A1A',
+  },
+  contentContainer: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.85)',
+    paddingHorizontal: 20,
+    paddingVertical: 24,
+    paddingBottom: 40,
+  },
+  headline: {
+    fontSize: 22,
+    fontWeight: '700',
+    color: '#FFFFFF',
+    marginBottom: 8,
+    lineHeight: 28,
+  },
+  bodyText: {
+    fontSize: 15,
+    color: '#E0E0E0',
+    lineHeight: 20,
+    marginBottom: 12,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 16,
+    flexWrap: 'wrap',
+    gap: 12,
+  },
+  ratingText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#FF9500',
+  },
+  priceText: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#34C759',
+  },
+  storeText: {
+    fontSize: 13,
+    color: '#AAAAAA',
+    flex: 1,
+  },
+  ctaButton: {
+    backgroundColor: '#007AFF',
+    paddingVertical: 14,
+    paddingHorizontal: 32,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ctaText: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#FFFFFF',
+  },
+});

package/src/components/NativeAdComponent.tsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  ActivityIndicator,
+  TouchableOpacity,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import {
+  NativeAdView,
+  NativeAsset,
+  NativeMediaView,
+  NativeAssetType,
+  NativeAd,
+} from 'react-native-google-mobile-ads';
+import { useNativeAd } from '../hook/useNativeAd';
+import type { AdInstance } from '../types/ads-types';
+import { styles } from './NativeStyles';
+
+interface NativeAdComponentProps {
+  adKey: string;
+  adId: string;
+  autoLoad?: boolean;
+  style?: ViewStyle;
+  onLoad?: (ad: AdInstance) => void;
+  onDisplay?: (ad: AdInstance) => void;
+  onError?: (error: string, ad: AdInstance) => void;
+  onClicked?: (ad: AdInstance) => void;
+  onImpression?: (ad: AdInstance) => void;
+  buttonActionStyles?: ViewStyle;
+  adBadgeStyles?: ViewStyle;
+  headlineStyles?: TextStyle;
+  bodyStyles?: TextStyle;
+  ratingStyles?: TextStyle;
+  priceStyles?: TextStyle;
+  storeStyles?: TextStyle;
+}
+
+export const NativeAdComponent: React.FC<NativeAdComponentProps> = ({
+  adKey,
+  adId,
+  autoLoad = true,
+  style,
+  onLoad,
+  onDisplay,
+  onError,
+  onClicked,
+  onImpression,
+  buttonActionStyles,
+  adBadgeStyles,
+  headlineStyles,
+  bodyStyles,
+  ratingStyles,
+  priceStyles,
+  storeStyles,
+}) => {
+  const { ad, isLoading, error, isLoaded, loadAd } = useNativeAd({
+    adKey,
+    adId,
+    autoLoad,
+    onLoad,
+    onDisplay,
+    onError,
+    onClicked,
+    onImpression,
+  });
+
+  // Render loading state
+  if (isLoading) {
+    return (
+      <View style={[styles.wrapper, style]}>
+        <View style={[styles.container, styles.centerContent]}>
+          <ActivityIndicator size="small" color="#007AFF" />
+          <Text style={styles.loadingText}>Đang tải quảng cáo...</Text>
+        </View>
+      </View>
+    );
+  }
+
+  // Render error state
+  if (error) {
+    return (
+      <View style={[styles.wrapper, style]}>
+        <View style={[styles.container, styles.centerContent]}>
+          <Text style={styles.errorText}>Lỗi: {error}</Text>
+          <TouchableOpacity onPress={() => loadAd()} style={styles.retryButton}>
+            <Text style={styles.retryText}>Thử lại</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+
+  // Render empty state
+  if (!isLoaded || !ad?.data?.nativeAd) {
+    return (
+      <View style={[styles.wrapper, style]}>
+        <View style={[styles.container, styles.centerContent]}>
+          <Text style={styles.emptyText}>Không có quảng cáo</Text>
+        </View>
+      </View>
+    );
+  }
+
+  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}>
+          {/* <NativeAsset assetType={NativeAssetType.ADVERTISER}> */}
+          <Text style={[styles.adBadge, adBadgeStyles]}>Ad</Text>
+          {/* </NativeAsset> */}
+          {nativeAd.advertiser && (
+            <NativeAsset assetType={NativeAssetType.ADVERTISER}>
+              <Text style={styles.advertiserText} numberOfLines={1}>
+                {nativeAd.advertiser}
+              </Text>
+            </NativeAsset>
+          )}
+        </View>
+
+        {/* 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}>
+          {/* Headline */}
+          {nativeAd.headline && (
+            <NativeAsset assetType={NativeAssetType.HEADLINE}>
+              <Text style={[styles.headline, headlineStyles]} numberOfLines={2}>
+                {nativeAd.headline}
+              </Text>
+            </NativeAsset>
+          )}
+
+          {/* Body */}
+          {nativeAd.body && (
+            <NativeAsset assetType={NativeAssetType.BODY}>
+              <Text style={[styles.bodyText, bodyStyles]} numberOfLines={3}>
+                {nativeAd.body}
+              </Text>
+            </NativeAsset>
+          )}
+
+          {/* Rating, Price, Store Row */}
+          <View style={styles.infoRow}>
+            {/* Star Rating */}
+            {nativeAd.starRating !== null &&
+              nativeAd.starRating !== undefined && (
+                <NativeAsset assetType={NativeAssetType.STAR_RATING}>
+                  <Text style={[styles.ratingText, ratingStyles]}>
+                    ⭐ {nativeAd.starRating.toFixed(1)}
+                  </Text>
+                </NativeAsset>
+              )}
+
+            {/* Price */}
+            {nativeAd.price && (
+              <NativeAsset assetType={NativeAssetType.PRICE}>
+                <Text style={[styles.priceText, priceStyles]}>
+                  {nativeAd.price}
+                </Text>
+              </NativeAsset>
+            )}
+
+            {/* Store */}
+            {nativeAd.store && (
+              <NativeAsset assetType={NativeAssetType.STORE}>
+                <Text style={[styles.storeText, storeStyles]} numberOfLines={1}>
+                  {nativeAd.store}
+                </Text>
+              </NativeAsset>
+            )}
+          </View>
+
+          {/* Call To Action Button */}
+          {nativeAd.callToAction && (
+            <NativeAsset assetType={NativeAssetType.CALL_TO_ACTION}>
+              <View style={[styles.ctaButton, buttonActionStyles]}>
+                <Text style={styles.ctaText}>{nativeAd.callToAction}</Text>
+              </View>
+            </NativeAsset>
+          )}
+        </View>
+
+        {/* Icon */}
+        {/* {nativeAd.icon && (
+          <NativeAsset assetType={NativeAssetType.ICON}>
+            <View style={styles.iconContainer} />
+          </NativeAsset>
+        )} */}
+      </NativeAdView>
+    </View>
+  );
+};

package/src/components/NativeAdFullscreenComponent.tsx

@@ -0,0 +1,261 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  ActivityIndicator,
+  TouchableOpacity,
+  type ViewStyle,
+  type TextStyle,
+  Dimensions,
+} from 'react-native';
+import {
+  NativeAdView,
+  NativeAsset,
+  NativeMediaView,
+  NativeAssetType,
+  NativeAd,
+} from 'react-native-google-mobile-ads';
+import { useNativeAd } from '../hook/useNativeAd';
+import type { AdInstance } from '../types/ads-types';
+import { fullscreenStyles } from './FullscreenStyles';
+
+const { height } = Dimensions.get('window');
+
+interface NativeAdFullscreenComponentProps {
+  adKey: string;
+  adId: string;
+  autoLoad?: boolean;
+  onClose?: () => void;
+  onLoad?: (ad: AdInstance) => void;
+  onDisplay?: (ad: AdInstance) => void;
+  onError?: (error: string, ad: AdInstance) => void;
+  onClicked?: (ad: AdInstance) => void;
+  onImpression?: (ad: AdInstance) => void;
+  buttonActionStyles?: ViewStyle;
+  adBadgeStyles?: ViewStyle;
+  headlineStyles?: TextStyle;
+  bodyStyles?: TextStyle;
+  ratingStyles?: TextStyle;
+  priceStyles?: TextStyle;
+  storeStyles?: TextStyle;
+  closeButtonStyles?: ViewStyle;
+  showCloseButton?: boolean;
+}
+
+export const NativeAdFullscreenComponent: React.FC<
+  NativeAdFullscreenComponentProps
+> = ({
+  adKey,
+  adId,
+  autoLoad = true,
+  onClose,
+  onLoad,
+  onDisplay,
+  onError,
+  onClicked,
+  onImpression,
+  buttonActionStyles,
+  adBadgeStyles,
+  headlineStyles,
+  bodyStyles,
+  ratingStyles,
+  priceStyles,
+  storeStyles,
+  closeButtonStyles,
+  showCloseButton = true,
+}) => {
+  const { ad, isLoading, error, isLoaded, loadAd } = useNativeAd({
+    adKey,
+    adId,
+    autoLoad,
+    onLoad,
+    onDisplay,
+    onError,
+    onClicked,
+    onImpression,
+  });
+
+  // Render loading state
+  if (isLoading) {
+    return (
+      <View style={fullscreenStyles.container}>
+        {showCloseButton && onClose && (
+          <TouchableOpacity
+            style={[fullscreenStyles.closeButton, closeButtonStyles]}
+            onPress={onClose}
+          >
+            <Text style={fullscreenStyles.closeButtonText}>✕</Text>
+          </TouchableOpacity>
+        )}
+
+        <View style={fullscreenStyles.centerContent}>
+          <ActivityIndicator size="large" color="#FFFFFF" />
+          <Text style={fullscreenStyles.loadingText}>
+            Đang tải quảng cáo...
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  // Render error state
+  if (error) {
+    return (
+      <View style={fullscreenStyles.container}>
+        {showCloseButton && onClose && (
+          <TouchableOpacity
+            style={[fullscreenStyles.closeButton, closeButtonStyles]}
+            onPress={onClose}
+          >
+            <Text style={fullscreenStyles.closeButtonText}>✕</Text>
+          </TouchableOpacity>
+        )}
+
+        <View style={fullscreenStyles.centerContent}>
+          <Text style={fullscreenStyles.errorText}>Lỗi: {error}</Text>
+          <TouchableOpacity
+            onPress={() => loadAd()}
+            style={fullscreenStyles.retryButton}
+          >
+            <Text style={fullscreenStyles.retryText}>Thử lại</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+
+  // Render empty state
+  if (!isLoaded || !ad?.data?.nativeAd) {
+    return (
+      <View style={fullscreenStyles.container}>
+        {showCloseButton && onClose && (
+          <TouchableOpacity
+            style={[fullscreenStyles.closeButton, closeButtonStyles]}
+            onPress={onClose}
+          >
+            <Text style={fullscreenStyles.closeButtonText}>✕</Text>
+          </TouchableOpacity>
+        )}
+
+        <View style={fullscreenStyles.centerContent}>
+          <Text style={fullscreenStyles.emptyText}>Không có quảng cáo</Text>
+        </View>
+      </View>
+    );
+  }
+
+  const nativeAd = ad.data.nativeAd as NativeAd;
+
+  return (
+    <View style={fullscreenStyles.container}>
+      <NativeAdView nativeAd={nativeAd} style={fullscreenStyles.adContainer}>
+        {/* Close Button */}
+        {showCloseButton && onClose && (
+          <TouchableOpacity
+            style={[fullscreenStyles.closeButton, closeButtonStyles]}
+            onPress={onClose}
+          >
+            <Text style={fullscreenStyles.closeButtonText}>✕</Text>
+          </TouchableOpacity>
+        )}
+
+        {/* Ad Badge và Advertiser - Top Overlay */}
+        <View style={fullscreenStyles.adHeader}>
+          <Text style={[fullscreenStyles.adBadge, adBadgeStyles]}>Ad</Text>
+          {nativeAd.advertiser && (
+            <NativeAsset assetType={NativeAssetType.ADVERTISER}>
+              <Text style={fullscreenStyles.advertiserText} numberOfLines={1}>
+                {nativeAd.advertiser}
+              </Text>
+            </NativeAsset>
+          )}
+        </View>
+
+        {/* Media View - Large, taking most of screen */}
+        {((nativeAd.images?.length && nativeAd.images.length > 0) ||
+          nativeAd.mediaContent) && (
+          <NativeMediaView
+            style={[
+              fullscreenStyles.mediaView,
+              nativeAd.mediaContent?.aspectRatio
+                ? { aspectRatio: nativeAd.mediaContent.aspectRatio }
+                : { height: height * 0.6 },
+            ]}
+          />
+        )}
+
+        {/* Content Area - Bottom Overlay */}
+        <View style={fullscreenStyles.contentContainer}>
+          {/* Headline */}
+          {nativeAd.headline && (
+            <NativeAsset assetType={NativeAssetType.HEADLINE}>
+              <Text
+                style={[fullscreenStyles.headline, headlineStyles]}
+                numberOfLines={2}
+              >
+                {nativeAd.headline}
+              </Text>
+            </NativeAsset>
+          )}
+
+          {/* Body */}
+          {nativeAd.body && (
+            <NativeAsset assetType={NativeAssetType.BODY}>
+              <Text
+                style={[fullscreenStyles.bodyText, bodyStyles]}
+                numberOfLines={3}
+              >
+                {nativeAd.body}
+              </Text>
+            </NativeAsset>
+          )}
+
+          {/* Rating, Price, Store Row */}
+          <View style={fullscreenStyles.infoRow}>
+            {/* Star Rating */}
+            {nativeAd.starRating !== null &&
+              nativeAd.starRating !== undefined && (
+                <NativeAsset assetType={NativeAssetType.STAR_RATING}>
+                  <Text style={[fullscreenStyles.ratingText, ratingStyles]}>
+                    ⭐ {nativeAd.starRating.toFixed(1)}
+                  </Text>
+                </NativeAsset>
+              )}
+
+            {/* Price */}
+            {nativeAd.price && (
+              <NativeAsset assetType={NativeAssetType.PRICE}>
+                <Text style={[fullscreenStyles.priceText, priceStyles]}>
+                  {nativeAd.price}
+                </Text>
+              </NativeAsset>
+            )}
+
+            {/* Store */}
+            {nativeAd.store && (
+              <NativeAsset assetType={NativeAssetType.STORE}>
+                <Text
+                  style={[fullscreenStyles.storeText, storeStyles]}
+                  numberOfLines={1}
+                >
+                  {nativeAd.store}
+                </Text>
+              </NativeAsset>
+            )}
+          </View>
+
+          {/* Call To Action Button */}
+          {nativeAd.callToAction && (
+            <NativeAsset assetType={NativeAssetType.CALL_TO_ACTION}>
+              <View style={[fullscreenStyles.ctaButton, buttonActionStyles]}>
+                <Text style={fullscreenStyles.ctaText}>
+                  {nativeAd.callToAction}
+                </Text>
+              </View>
+            </NativeAsset>
+          )}
+        </View>
+      </NativeAdView>
+    </View>
+  );
+};