diff --git a/README.md b/README.md index ec9f5c71..20aa302d 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,6 @@ src="https://i.imgur.com/yX5GKhN.png" /> -

💫 Features

@@ -265,8 +264,8 @@ Setting this to true will load a placeholder ad (Not from Admob server) incase y Time in ms after which a new ad should be requested from the server. -| Type | Required | Default | Platform | -| -------- | -------- | -------- | -------- | +| Type | Required | Default | Platform | +| -------- | -------- | ------------------- | -------- | | `number` | no | 60000 ms (1 minute) | All | # @@ -308,7 +307,8 @@ User impression has been recorded User has clicked on the ad. ## Children Views -The children views render different data recieved in the Ad from the server. All the values etc are assigned automatically, all you need to do is style the according to your design. + +The children views render different data recieved in the Ad from the server. All the values etc are assigned automatically, all you need to do is style the according to your design. **Note:** Do not set `nativeID` and `onLayout` prop on any of the Children views as these are used to register the views on Native iOS and Android. @@ -506,11 +506,60 @@ import { MediaView } from "react-native-admob-native-ads"; }} />; ``` +### props + +#### `style:ViewStyle` + +Style the outer `MediaView` Component. + +## CallToActionView + +Renders a CallToAction Button + +```jsx +import { CallToActionView } from "react-native-admob-native-ads"; + +; +``` +### props + +#### `allCaps` + +| Type | Required | Platform | +| --------- | -------- | -------- | +| `boolean` | no | All | + +Whether all text should be in capital letters ### props -`style:ViewStyle` -style your media view. +#### `style:ViewStyle` + +Style the outer `View` Component. + +#### `textStyle:TextStyle` + +Style the inner `Text` Component + +#### `allCaps` + +| Type | Required | Platform | +| --------- | -------- | -------- | +| `boolean` | no | All | + +Whether all text should be in capital letters + ## Contact & Support diff --git a/android/src/main/java/com/ammarahmed/rnadmob/nativeads/RNAdMobNativeViewManager.java b/android/src/main/java/com/ammarahmed/rnadmob/nativeads/RNAdMobNativeViewManager.java index 24761737..3a4597a8 100755 --- a/android/src/main/java/com/ammarahmed/rnadmob/nativeads/RNAdMobNativeViewManager.java +++ b/android/src/main/java/com/ammarahmed/rnadmob/nativeads/RNAdMobNativeViewManager.java @@ -2,12 +2,15 @@ import android.view.View; +import androidx.annotation.NonNull; + import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableNativeArray; import com.facebook.react.common.MapBuilder; import com.facebook.react.uimanager.ThemedReactContext; import com.facebook.react.uimanager.ViewGroupManager; import com.facebook.react.uimanager.annotations.ReactProp; +import com.facebook.react.uimanager.util.ReactFindViewUtil; import com.google.android.gms.ads.MobileAds; import com.google.android.gms.ads.RequestConfiguration; @@ -31,12 +34,22 @@ public class RNAdMobNativeViewManager extends ViewGroupManager; onAdOpened?: Function; @@ -90,41 +92,35 @@ type NativeAdViewProps = { type SimpleViewProps = { style?: ViewStyle; - }; type NestedTextProps = { style?: ViewStyle; textStyle?: TextStyle; -} - -type AdBadgeProps = { - style?: ViewStyle; - textStyle?: TextStyle; - allCaps?:boolean -} + allCaps?: boolean; +}; declare module "react-native-admob-native-ads" { - /** - * + * * Wrapper for the UnifiedNativeAdView from Google Ads SDK. All your views should be * wrapped inside this view always. - * + * */ - export default function NativeAdView(props: NativeAdViewProps): React.FunctionComponent; - + export default function NativeAdView( + props: NativeAdViewProps + ): React.FunctionComponent; /** * Ad Badge shows the {ad} badge on top of the ad telling the user that this is an AD. - * + * */ export function AdBadge(props: NestedTextProps): React.FunctionComponent; /** - * The title of the native ad recieved from server is renderd here. + * The title of the native ad recieved from server is renderd here. * You dont need to pass any values to it. It will automatically get the title from * context and load it. * You should on style it as you want. @@ -132,12 +128,12 @@ declare module "react-native-admob-native-ads" { export function HeadlineView(props: TextProps): React.FunctionComponent; /** - * * The description of the native ad recieved from server is renderd here. + * * The description of the native ad recieved from server is renderd here. */ export function TaglineView(props: TextProps): React.FunctionComponent; /** - * * The adveriser name of the native ad recieved from server is renderd here. + * * The adveriser name of the native ad recieved from server is renderd here. */ export function AdvertiserView(props: TextProps): React.FunctionComponent; /** @@ -147,7 +143,7 @@ declare module "react-native-admob-native-ads" { /** * Many times, the ad recieved will be from the Google Playstore or AppStore for iOS. - * In that case, you can show the store name using this view. + * In that case, you can show the store name using this view. */ export function StoreView(props: TextProps): React.FunctionComponent; @@ -166,19 +162,20 @@ declare module "react-native-admob-native-ads" { export function MediaView(props: SimpleViewProps): React.FunctionComponent; /** - * A simple button to open the adveriser website or store page etc. It is a simple - * Text Component wrapped in a View. I dont know how to make the Touchables or Buttons + * A simple button to open the adveriser website or store page etc. It is a simple + * Text Component wrapped in a View. I dont know how to make the Touchables or Buttons * work since they have no effect. Native side does not recieve the call hence simple * Text Component is used to receive the clicks. */ - export function CallToActionView(props: NestedTextProps): React.FunctionComponent; + export function CallToActionView( + props: NestedTextProps + ): React.FunctionComponent; /** * A Star Rating View to show the star rating for the app ads that you might recieve from * the server. */ - export function StarRatingView(props: StarRatingProps): React.FunctionComponent; - - - + export function StarRatingView( + props: StarRatingProps + ): React.FunctionComponent; } diff --git a/ios/RNGADNativeView.h b/ios/RNGADNativeView.h index 41b4b265..32125463 100755 --- a/ios/RNGADNativeView.h +++ b/ios/RNGADNativeView.h @@ -12,7 +12,7 @@ @property (nonatomic, copy) NSArray *testDevices; @property (nonatomic, copy) NSNumber *refreshInterval; @property (nonatomic, copy) NSString *adUnitID; - +@property (nonatomic, copy) NSNumber *delayAdLoad; @property (nonatomic, copy) NSNumber *headline; @property (nonatomic, copy) NSNumber *tagline; @property (nonatomic, copy) NSNumber *advertiser; diff --git a/ios/RNGADNativeView.m b/ios/RNGADNativeView.m index 7bbe1212..d19e5c32 100755 --- a/ios/RNGADNativeView.m +++ b/ios/RNGADNativeView.m @@ -20,9 +20,12 @@ @implementation RNGADNativeView : GADUnifiedNativeAdView NSString *adUnitId; NSNumber *refreshingInterval; +NSNumber *delay; + - (instancetype)initWithBridge:(RCTBridge *)_bridge { + delay = @1000; refreshingInterval = @60000; if (self = [super init]) { bridge = _bridge; @@ -30,6 +33,11 @@ - (instancetype)initWithBridge:(RCTBridge *)_bridge return self; } +- (void)setDelayAdLoad:(NSNumber *)delayAdLoad +{ + delay = delayAdLoad; +} + - (void)setTestDevices:(NSArray *)testDevices { _testDevices = RNAdMobProcessTestDevices(testDevices, kDFPSimulatorID); @@ -253,6 +261,7 @@ - (void)adLoader:(GADAdLoader *)adLoader didFailToReceiveAdWithError:(GADRequest - (void)adLoader:(GADAdLoader *)adLoader didReceiveUnifiedNativeAd:(GADUnifiedNativeAd *)nativeAd { + dispatch_after((int64_t)((delay.intValue/1000) * NSEC_PER_SEC), dispatch_get_main_queue(), ^(void){ if (self.onAdLoaded) { self.onAdLoaded(@{}); @@ -271,16 +280,13 @@ - (void)adLoader:(GADAdLoader *)adLoader didReceiveUnifiedNativeAd:(GADUnifiedNa [dic setValue:nativeAd.price forKey:@"price"]; [dic setValue:nativeAd.callToAction forKey:@"callToAction"]; - if (nativeAd.mediaContent.hasVideoContent) { [dic setValue:@YES forKey:@"video"]; }else { [dic setValue:@NO forKey:@"video"]; } - NSMutableArray *images = [NSMutableArray array]; - GADNativeAdImage *image = [nativeAd.images objectAtIndex:0]; NSString *url = [image.imageURL absoluteString]; [images addObject:url]; @@ -298,11 +304,7 @@ - (void)adLoader:(GADAdLoader *)adLoader didReceiveUnifiedNativeAd:(GADUnifiedNa dispatch_after(popTime, dispatch_get_main_queue(), ^(void){ [self loadAd:adUnitId]; }); - - - - - + }); } diff --git a/ios/RNGADNativeViewManager.m b/ios/RNGADNativeViewManager.m index d2d14620..cd65dc83 100755 --- a/ios/RNGADNativeViewManager.m +++ b/ios/RNGADNativeViewManager.m @@ -33,7 +33,7 @@ -(UIView *)view RCT_EXPORT_VIEW_PROPERTY(testDevices, NSArray) RCT_EXPORT_VIEW_PROPERTY(refreshInterval, NSNumber) RCT_EXPORT_VIEW_PROPERTY(adUnitID, NSString) - +RCT_EXPORT_VIEW_PROPERTY(delayAdLoad, NSNumber) RCT_EXPORT_VIEW_PROPERTY(headline, NSNumber) RCT_EXPORT_VIEW_PROPERTY(tagline, NSNumber) RCT_EXPORT_VIEW_PROPERTY(advertiser, NSNumber) diff --git a/package.json b/package.json index f57971b3..fb47c2cb 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-admob-native-ads", - "version": "0.2.0", + "version": "0.2.1", "description": "A simple and robust library for creating & displaying Admob Native Ads in your React Native App using Native Views", "author": "Ammar Ahmed ", "main": "index.js", diff --git a/src/AdvertiserView.js b/src/AdvertiserView.js index 717005ae..b997635b 100644 --- a/src/AdvertiserView.js +++ b/src/AdvertiserView.js @@ -1,5 +1,5 @@ -import React, { useContext, createRef } from "react"; -import { Text, Platform, findNodeHandle } from "react-native"; +import React, { createRef, useContext } from "react"; +import { findNodeHandle, Text } from "react-native"; import { NativeAdContext, nativeAdView } from "./context"; const advertiserRef = createRef(); @@ -7,7 +7,6 @@ const AdvertiserView = (props) => { const { nativeAd, setNativeAd } = useContext(NativeAdContext); const _onLayout = () => { - if (Platform.OS === "android") return; let handle = findNodeHandle(advertiserRef.current); nativeAdView.current?.setNativeProps({ advertiser: handle, @@ -16,7 +15,11 @@ const AdvertiserView = (props) => { return ( - {nativeAd ? props.allCaps? nativeAd.advertiser?.toUpperCase() : nativeAd.advertiser : null} + {nativeAd + ? props.allCaps + ? nativeAd.advertiser?.toUpperCase() + : nativeAd.advertiser + : null} ); }; diff --git a/src/CallToActionView.js b/src/CallToActionView.js index f46d8c77..cee24ffe 100644 --- a/src/CallToActionView.js +++ b/src/CallToActionView.js @@ -1,5 +1,5 @@ import React, { createRef, useContext } from "react"; -import { findNodeHandle, Platform, Text } from "react-native"; +import { findNodeHandle, Text } from "react-native"; import { RawButton } from "react-native-gesture-handler"; import { NativeAdContext, nativeAdView } from "./context"; @@ -8,7 +8,6 @@ const CallToActionView = (props) => { const { nativeAd, setNativeAd } = useContext(NativeAdContext); const _onLayout = () => { - if (Platform.OS === "android") return; let handle = findNodeHandle(callToActionRef.current); nativeAdView.current?.setNativeProps({ callToAction: handle, @@ -17,7 +16,6 @@ const CallToActionView = (props) => { return ( { ]} > - {nativeAd ? nativeAd.callToAction : null} + {nativeAd + ? props.allCaps + ? nativeAd.callToAction?.toUpperCase() + : nativeAd.callToAction + : null} ); diff --git a/src/HeadlineView.js b/src/HeadlineView.js index 59c18e3a..5ecddc8a 100644 --- a/src/HeadlineView.js +++ b/src/HeadlineView.js @@ -1,5 +1,5 @@ -import React, { useContext, createRef } from "react"; -import { Text, Platform, findNodeHandle } from "react-native"; +import React, { createRef, useContext } from "react"; +import { findNodeHandle, Text } from "react-native"; import { NativeAdContext, nativeAdView } from "./context"; const headlineRef = createRef(); @@ -8,7 +8,6 @@ const HeadlineView = (props) => { const { nativeAd, setNativeAd } = useContext(NativeAdContext); const _onLayout = () => { - if (Platform.OS === "android") return; let handle = findNodeHandle(headlineRef.current); nativeAdView.current?.setNativeProps({ headline: handle, @@ -18,7 +17,6 @@ const HeadlineView = (props) => { return ( diff --git a/src/IconView.js b/src/IconView.js index 93a39318..64ba7a28 100644 --- a/src/IconView.js +++ b/src/IconView.js @@ -1,5 +1,5 @@ -import React, { useContext, createRef } from "react"; -import { Image, findNodeHandle, Platform } from "react-native"; +import React, { createRef, useContext } from "react"; +import { findNodeHandle, Image } from "react-native"; import { NativeAdContext, nativeAdView } from "./context"; const iconViewRef = createRef(); @@ -8,7 +8,6 @@ const IconView = (props) => { const { nativeAd, setNativeAd } = useContext(NativeAdContext); const _onLayout = () => { - if (Platform.OS === "android") return; let handle = findNodeHandle(iconViewRef.current); nativeAdView.current?.setNativeProps({ icon: handle, @@ -21,7 +20,6 @@ const IconView = (props) => { resizeMode="cover" ref={iconViewRef} onLayout={_onLayout} - nativeID="adIconView" source={{ uri: nativeAd.icon }} /> ) : null; diff --git a/src/ImageView.js b/src/ImageView.js index 25ae3a6e..43f9160c 100644 --- a/src/ImageView.js +++ b/src/ImageView.js @@ -1,5 +1,5 @@ -import React, { useContext, createRef } from "react"; -import { Image, findNodeHandle, Platform } from "react-native"; +import React, { createRef, useContext } from "react"; +import { findNodeHandle, Image } from "react-native"; import { NativeAdContext, nativeAdView } from "./context"; const imageViewRef = createRef(); @@ -8,7 +8,6 @@ const ImageView = (props) => { const { nativeAd, setNativeAd } = useContext(NativeAdContext); const _onLayout = () => { - if (Platform.OS === "android") return; let handle = findNodeHandle(imageViewRef.current); nativeAdView.current?.setNativeProps({ image: handle, @@ -20,7 +19,6 @@ const ImageView = (props) => { {...props} ref={imageViewRef} onLayout={_onLayout} - nativeID="adImageView" source={{ uri: nativeAd.images[0] }} /> ) : null; diff --git a/src/MediaView.js b/src/MediaView.js index 3645e7ac..16556c39 100644 --- a/src/MediaView.js +++ b/src/MediaView.js @@ -1,5 +1,5 @@ import React, { createRef } from "react"; -import { requireNativeComponent, findNodeHandle } from "react-native"; +import { findNodeHandle, requireNativeComponent } from "react-native"; import { nativeAdView } from "./context"; const adMediaView = createRef(); diff --git a/src/PriceView.js b/src/PriceView.js index 8ed44dc5..49ddada6 100644 --- a/src/PriceView.js +++ b/src/PriceView.js @@ -1,5 +1,5 @@ -import React, { useContext, createRef } from "react"; -import { Text, Platform, findNodeHandle } from "react-native"; +import React, { createRef, useContext } from "react"; +import { findNodeHandle, Text } from "react-native"; import { NativeAdContext, nativeAdView } from "./context"; const priceViewRef = createRef(); @@ -8,19 +8,13 @@ const PriceView = (props) => { const { nativeAd, setNativeAd } = useContext(NativeAdContext); const _onLayout = () => { - if (Platform.OS === "android") return; let handle = findNodeHandle(priceViewRef.current); nativeAdView.current?.setNativeProps({ price: handle, }); }; return ( - + {nativeAd ? nativeAd.price : null} ); diff --git a/src/StarRatingView.js b/src/StarRatingView.js index c17a4547..c651bc89 100644 --- a/src/StarRatingView.js +++ b/src/StarRatingView.js @@ -1,14 +1,13 @@ -import React, { useContext, createRef } from "react"; -import { Platform, findNodeHandle } from "react-native"; -import { NativeAdContext, nativeAdView } from "./context"; +import React, { createRef, useContext } from "react"; +import { findNodeHandle } from "react-native"; import StarRating from "react-native-star-rating"; +import { NativeAdContext, nativeAdView } from "./context"; const starRatingRef = createRef(); const StarRatingView = (props) => { const { nativeAd, setNativeAd } = useContext(NativeAdContext); const _onLayout = () => { - if (Platform.OS === "android") return; let handle = findNodeHandle(starRatingRef.current); nativeAdView.current?.setNativeProps({ starrating: handle, @@ -19,7 +18,6 @@ const StarRatingView = (props) => { diff --git a/src/StoreView.js b/src/StoreView.js index 59c4cc81..ea6bf723 100644 --- a/src/StoreView.js +++ b/src/StoreView.js @@ -1,5 +1,5 @@ -import React, { useContext, createRef } from "react"; -import { Text, findNodeHandle, Platform } from "react-native"; +import React, { createRef, useContext } from "react"; +import { findNodeHandle, Text } from "react-native"; import { NativeAdContext, nativeAdView } from "./context"; const storeViewRef = createRef(); @@ -7,7 +7,6 @@ const StoreView = (props) => { const { nativeAd, setNativeAd } = useContext(NativeAdContext); const _onLayout = () => { - if (Platform.OS === "android") return; let handle = findNodeHandle(storeViewRef.current); nativeAdView.current?.setNativeProps({ store: handle, @@ -15,12 +14,7 @@ const StoreView = (props) => { }; return ( - + {nativeAd ? nativeAd.store : null} ); diff --git a/src/TaglineView.js b/src/TaglineView.js index fe217d25..b9948688 100644 --- a/src/TaglineView.js +++ b/src/TaglineView.js @@ -1,5 +1,5 @@ -import React, { useContext, createRef } from "react"; -import { Text, Platform, findNodeHandle } from "react-native"; +import React, { createRef, useContext } from "react"; +import { findNodeHandle, Text } from "react-native"; import { NativeAdContext, nativeAdView } from "./context"; const taglineRef = createRef(); @@ -7,7 +7,6 @@ const TaglineView = (props) => { const { nativeAd, setNativeAd } = useContext(NativeAdContext); const _onLayout = () => { - if (Platform.OS === "android") return; let handle = findNodeHandle(taglineRef.current); nativeAdView.current?.setNativeProps({ tagline: handle, @@ -15,12 +14,7 @@ const TaglineView = (props) => { }; return ( - + {nativeAd ? nativeAd.tagline : null} ); diff --git a/src/index.js b/src/index.js index 2e9e17f6..a7c4fd93 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -import React, { useState, useEffect } from "react"; -import { requireNativeComponent, Platform } from "react-native"; +import React, { useEffect, useState } from "react"; +import { Platform, requireNativeComponent } from "react-native"; import { NativeAdContext, nativeAdView } from "./context"; import Wrapper from "./Wrapper"; @@ -86,6 +86,7 @@ const NativeAdView = (props) => { onAdOpened={_onAdOpened} onAdClosed={_onAdClosed} onAdImpression={_onAdImpression} + delayAdLoad={props.delayAdLoad? props.delayAdLoad : 1000} style={props.style} onUnifiedNativeAdLoaded={_onUnifiedNativeAdLoaded} adUnitID={props.adUnitID}