react-native-admob-native-ads

The library provides the following capabilities:

• Ad Format: Support for Admob Native Advanced Ads.
• Cross-Platform: Works on both iOS and Android with identical behavior.
• Custom Design: Full freedom to build ad layouts from the ground up using React Native components.
• Video Support: Support for video ads.
• Auto-Refresh: Ability to auto-refresh ads at specific intervals.
• Ad Mediation: Support for mediation, specifically Facebook Ads Mediation (Video & Banners).
• Ad Targeting: Support for ad targeting.
• Type Safety: Includes TypeScript definitions.

The library provides the following capabilities:

• Admob Native Advanced Ads: Uses the native advanced format for high customization.
• Cross Platform: Supports both iOS and Android with identical behavior.
• Customizable UI: No limits on how you design the ad components.
• No Native Layout Management: No need to touch .xml or .xib files.
• AutoRefresh: Automatically refresh ads at specific intervals.
• Ad Preloading: Support for preloading ads to improve user experience.
• Video Support: Includes support for video ads.
• Ad Mediation: Supports mediation, specifically mentioning Facebook Ads.
• Ad Targeting: Supports ad targeting features.
• TypeScript: Includes TypeScript definitions for type safety.

Unlike traditional ad implementations that load ads inside a WebView (which limits styling to width and height adjustments), this library uses the Admob Native Advanced ad format.

The Workflow:

1. The library requests ad information (images, headlines, videos, etc.) from Admob servers.
2. This raw data is sent over the bridge to React Native.
3. You render the data using standard React Native View and Text components.

Key Benefit: Because you are rendering the data using standard components, you have complete control over the design. You can make ads match your app's specific design, colors, and layout without needing to manage native .xml (Android) or .xib (iOS) layout files.

Unlike traditional ad libraries that load ads inside a WebView (which limits styling to width and height adjustments), this library uses the Admob Native Advanced format.

Instead of rendering a web view, the library requests raw ad data (images, headlines, videos, etc.) from Admob servers and sends it across the React Native bridge. This allows you to render the ad content using standard React Native View and Text components, giving you full control over the visual design.

The NativeAdView component acts as a wrapper for all individual ad components (like headlines, images, or call-to-action buttons). It provides a Context through which these child components can access and load the ad data.

To ensure the NativeAdView does not re-render unnecessarily and trigger unwanted ad requests, it is recommended to wrap your component in React.memo() or use React.PureComponent.

import NativeAdView from "react-native-admob-native-ads";

<NativeAdView adUnitID="YOUR_AD_UNIT_ID">
  <View>/* All other ad components */</View>
</NativeAdView>

Ads are not loaded automatically. You must provide a ref to the NativeAdView and call the .loadAd() method imperatively, typically within a useEffect hook.

const AdView = () => {
  const nativeAdViewRef = useRef();

  React.useEffect(() => {
    nativeAdViewRef.current?.loadAd();
  }, []);

  return (
    <NativeAdView
      ref={nativeAdViewRef}
      adUnitID="ca-app-pub-3940256099942544/2247696110"
    >
      <View>/* All other ad components */</View>
    </NativeAdView>
  );
};

To explore common use cases and interact with the library's features, you can clone the repository and run the provided example project.

1. Clone the repository:

   git clone https://github.com/ammarahm-ed/react-native-admob-native-ads.git

2. Navigate to the example folder and install dependencies using yarn or npm.
3. Run the example app on Android:

   yarn react-native run-android

Note: Before committing any changes to your own project, ensure you remove any references to react-native-admob-native-ads from your package.json and package-lock.json files.

git clone https://github.com/ammarahm-ed/react-native-admob-native-ads.git
# Navigate to example folder
yarn install
yarn react-native run-android

After modifying App.tsx, use the following methods to reload the app and reflect changes:

• Android: Press the <kbd>R</kbd> key twice or open the Developer Menu (<kbd>Ctrl</kbd> + <kbd>M</kbd> on Windows/Linux or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> on macOS) and select "Reload".
• iOS: Press <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> within the iOS Simulator.

1. Add Google-Mobile-Ads-SDK to your Podfile (e.g., pod 'Google-Mobile-Ads-SDK', '~>9.11.0').
2. Update your info.plist following the official AdMob documentation.
3. Run pod install --repo-update to apply changes.

Requesting IDFA on iOS 14+: To show targeted ads, you must request IDFA access via the App Tracking Transparency dialog. It is recommended to use react-native-tracking-transparency for this purpose.

# After updating Podfile and info.plist
pod install --repo-update