Admob for React Native with powerful hooks and components

Related tags

Spring Boot admob
Overview

React Native Admob

npm

⚠️ Please note, this package is under active development, which means it may be not stable to apply on production. Please use this package on your own risk. New issues and PRs are always welcome.

Admob for React Native with powerful hooks and components

Installation

See Installation Guide

Documentation

Head over Documentation Page

Usage

Initializing Mobile Ads SDK

import { AdManager } from '@react-native-admob/admob';

AdManager.initialize();

Displaying Banner Ad

import { BannerAd, BannerAdSize } from '@react-native-admob/admob';

<BannerAd
  size={BannerAdSize.BANNER}
  unitId={UNIT_ID_BANNER}
  onAdFailedToLoad={(error) => console.error(error)}
  ref={bannerRef}
/>;

Displaying InterstitialAd

import { useInterstitialAd } from '@react-native-admob/admob';

const { adLoadError, adLoaded, presentAd } = useInterstitialAd(UNIT_ID_INTERSTITIAL);

useEffect(() => {
  if (adLoadError) {
    console.error(adLoadError);
  }
}, [adLoadError]);

useEffect(() => {
  if (adLoaded) {
    presentAd();
  }
}, [adLoaded]);

Displaying RewardedAd

import { useRewardedAd } from '@react-native-admob/admob';

const { adLoadError, adLoaded, presentAd, reward } = useRewardedAd(UNIT_ID_REWARDED);

useEffect(() => {
  if (adLoadError) {
    console.error(adLoadError);
  }
}, [adLoadError]);

useEffect(() => {
  if (adLoaded) {
    presentAd();
  }
}, [adLoaded]);

useEffect(() => {
  if (reward) {
    console.log('Reward earned: ');
    console.log(reward);
  }
}, [reward]);

For detailed usage, head over Documentation.

License

MIT

Comments
  • message:

    message:"No ad config", "code:3"

    Description

    Expected behavior

    I expected to see a Banner Ad from admob

    Actual behavior & steps to reproduce

    instead i got an error saying no ad config, code:3

    Snack or minimal code example

    import React from 'react' import { View, Text,Image, TouchableOpacity } from 'react-native' import styles from './styles' import { useNavigation } from '@react-navigation/native' import { PAYMENT_PAGE } from '../../constants/routeNames' import Icon from '../common/Icon' import { BannerAd,TestIds,BannerAdSize} from '@react-native-admob/admob';

    const CheckCoinComponent = ({coinamount,isPremium,showAds,name,daysLeft}) => { const {navigate} = useNavigation() //console.log(isPremium) return ( <View style={styles.Container}> <View style={styles.viewone}> <View style={styles.viewonewrap}> <BannerAd size={BannerAdSize.ADAPTIVE_BANNER} unitId={"ca-app-pub-7467526896400501/3262508535"} onAdFailedToLoad={(error) => console.error(error)} requestOptions={{ requestNonPersonalizedAdsOnly: true, }} />

    Package versions

    • React Native: 0.64.2
    • React Native AdMob:1.2.0
    • Google Mobile Ads SDK(if specified):20.4.0
    • Xcode:
    • Java & Gradle: Android gradle plugin: 4.2.2 gradle plugin version: 6.8.3

    Affected platforms

    Android

    opened by Obhenimen 29
  • useAppOpenAd still shows after disabling it

    useAppOpenAd still shows after disabling it

    I have paid option to disable ads:

    useAppOpenAd(initialized && !disableAds ? unitId : null, {
      showOnColdStart: false,
      showOnAppForeground: true,
    });
    

    but after an user purchases ads removal, app open ad still shows on app foreground

    opened by andkom 12
  • Bug: Ad not working in android release build

    Bug: Ad not working in android release build

    Description

    Hey the app seems to able to load ad in the development but after creating a release build the ad fails with the following error (from logcat)

    11-24 17:32:26.174  3269 20885 I Ads     : SDK version: afma-sdk-a-v213806999.213806000.1
    11-24 17:32:26.176  3269 20885 I Ads     : HTTP timeout: 60000 milliseconds.
    11-24 17:32:26.440  1035  1130 E QMI_FW  : qmi_cci_get_ref: ref count increased 2
    11-24 17:32:26.440  1035  1130 D VSC     : @ 18495.100: [WO] Proposed rotation: 4, flat angle threshold: 65
    11-24 17:32:26.440  1035  1130 D VSC     : @ 18495.100: [WO] orientation angle 333, orientation 4
    11-24 17:32:26.440  1035  1130 E QMI_FW  : qmi_cci_get_ref: ref count increased 2
    11-24 17:32:26.440  1035  1130 D VSC     : @ 18495.100: [WO] Gyro angle integrated: 11.260452
    11-24 17:32:26.718 19773 20853 E FA      : Missing google_app_id. Firebase Analytics disabled. See https://goo.gl/NAOOOI
    11-24 17:32:26.722 19773 19773 I Ads     : Ad failed to load : 3
    11-24 17:32:26.731  3269  3269 D BoundBrokerSvc: onBind: Intent { act=com.google.android.gms.measurement.START pkg=com.google.android.gms }
    11-24 17:32:26.731  3269  3269 D BoundBrokerSvc: Loading bound service for intent: Intent { act=com.google.android.gms.measurement.START pkg=com.google.android.gms }
    

    Expected behavior

    The ad should show up in the release build of android as well

    App source

    https://github.com/ShivamJoker/SQL-Play/blob/master/src/component/App.tsx#L86

    Package versions

    • React Native: 0.66.1
    • React Native AdMob: ^1.2.3
    • Google Mobile Ads SDK(if specified):
    • Xcode: 13.1
    • Java & Gradle: Gradle 4.2.2

    Affected platforms

    • [X] Android
    • [ ] iOS
    opened by ShivamJoker 10
  • AppOpenAd displayed above the interstialAd which is violation

    AppOpenAd displayed above the interstialAd which is violation

    I want showOnAppForeground to true which is working fine, BUT when we resume the app on interstialAd then appOpenAd is shown above the InterstitialAd, which is violation.

    import { AppOpenAdProvider, TestIds } from '@react-native-admob/admob';
    
        <AppOpenAdProvider
          unitId={TestIds.APP_OPEN}
          options={{ showOnColdStart: true, showOnAppForeground : true }}
        >
          {...........................................}
        </AppOpenAdProvider>
    

    So how can we handle this using this library or avoid violation ??????

    opened by zoobibackups 7
  • When using hooks adding parameters causes infinite rendering loop

    When using hooks adding parameters causes infinite rendering loop

    I am using v1.2.1 and get the same response on IOS and Android. When using hooks like useRewardedAd, if I include parameters (doesnt seem to matter which ones, though my goal was to use requestNonPersonalizedAdsOnly) then the app goes into an infinite rendering loop. Below is an example setting almost all of the parameters, but I also just tried the requestNonPersonalizedAdsOnly one and got the same result. const op = { loadOnMounted: true, showOnLoaded: false, loadOnDismissed:true, requestOptions: { requestNonPersonalizedAdsOnly: true}}; const { adLoadError, adLoaded, show, load, reward, adPresented, adDismissed } = useRewardedAd(TestIds.REWARDED, op);

    Or this code: const requestOptions = { requestNonPersonalizedAdsOnly: true, }; const { adLoadError, adLoaded, show, load, reward, adPresented, adDismissed } = useRewardedAd(TestIds.REWARDED, requestOptions); image

    opened by scottc5 7
  • useAppOpenAd blocks splash screen

    useAppOpenAd blocks splash screen

    When I exit app, it will still remain in task manager. If I reopen app again, Ad will never present, so adDismissed, adLoadError never change and splash screen never hides. If I force remove app from task manager before reopening again, everything works OK. Same behavior for showOnAppForeground: true.

    The issue can be reproduced in the example app too.

    opened by andkom 7
  • The provided view controller is not being presented

    The provided view controller is not being presented

    Description

    The provided view controller is not being presented while trying to load the ad on iOS Continuing from #48

    Snack or minimal code example

    Just the example from docs

    Package versions

    • React Native: 0.66.1
    • React Native AdMob: ^1.2.1
    • Google Mobile Ads SDK(if specified):
    • Xcode: 13.1
    • Java & Gradle: Gradle 4.2.2

    Affected platforms

    • [ ] Android
    • [x] iOS
    opened by ShivamJoker 6
  • [ios] onSizeChange called with incorrect arguments for banner ads

    [ios] onSizeChange called with incorrect arguments for banner ads

      const onSizeChange = (size) => {
        console.info(`${JSON.stringify(size)}`);
      };
    
      <BannerAd
        size={BannerAdSize.ADAPTIVE_BANNER}
        unitId={unitId}
        onSizeChange={onSizeChange} />
    

    The above snippet prints

    TypeError: JSON.stringify cannot serialize cyclic structures.
    

    Both size.width & size.height are undefined.

    opened by mars-lan 6
  • Cannot load banner ads

    Cannot load banner ads

    {"code":"E_AD_LOAD_FAILED","message":"Cannot find an ad network adapter with the name(s): com.google.DummyAdapter. Remember to link all required ad network adapters and SDKs, and set -ObjC in the 'Other Linker Flags' setting of your build target.","nativeStackIOS":["0 MonNgonMoiNgay 0x00000001101f5a90 RCTJSErrorFromCodeMessageAndNSError + 112","1 MonNgonMoiNgay 0x000000010ffb701b -[RNAdMobBannerView bannerView:didFailToReceiveAdWithError:] + 139","2 MonNgonMoiNgay 0x0000000110583b05 GAD_GADBannerView_x86_64_8_13_0 + 5556","3 MonNgonMoiNgay 0x00000001105db190 __destroy_helper_block_e8_32s40s48s56s64s72w + 305","4 MonNgonMoiNgay 0x00000001105dad68 GAD_GADInternalBannerView_x86_64_8_13_0 + 6776","5 MonNgonMoiNgay 0x00000001105da972 GAD_GADInternalBannerView_x86_64_8_13_0 + 5762","6 MonNgonMoiNgay 0x00000001105dafd2 GAD_GADInternalBannerView_x86_64_8_13_0 + 7394","7 libdispatch.dylib 0x00007fff20110876 _dispatch_call_block_and_release + 12","8 libdispatch.dylib 0x00007fff20111a56 _dispatch_client_callout + 8","9 libdispatch.dylib 0x00007fff2011ee20 _dispatch_main_queue_callback_4CF + 1073","10 CoreFoundation 0x00007fff2036985d CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE + 9","11 CoreFoundation 0x00007fff203640ba __CFRunLoopRun + 2772","12 CoreFoundation 0x00007fff20363103 CFRunLoopRunSpecific + 567","13 GraphicsServices 0x00007fff2c851cd3 GSEventRunModal + 139","14 UIKitCore 0x00007fff24ffbe63 -[UIApplication _run] + 928","15 UIKitCore 0x00007fff25000a53 UIApplicationMain + 101","16 MonNgonMoiNgay 0x000000010fac33c8 main + 104","17 dyld 0x0000000113024e1e start_sim + 10","18 ??? 0x00000001212884fe 0x0 + 4851270910"],"domain":"com.google.admob","userInfo":{"NSLocalizedDescription":"Cannot find an ad network adapter with the name(s): com.google.DummyAdapter. Remember to link all required ad network adapters and SDKs, and set -ObjC in the 'Other Linker Flags' setting of your build target.","gad_response_info":null},"target":329}

    opened by khoabuidev 5
  • Cannot read property 'requestAd' of null

    Cannot read property 'requestAd' of null

    I want to show an interstitial add, but i'm always getting Cannot read property 'requestAd' of null.

    The only thing I'm doing is this

    const interstitialAd = useInterstitialAd(
        "ca-app-pub-3940256099942544/1033173712",
        {}
      );
    

    I'm sorry if this is a dumb question. Can someone give me an example or something.

    opened by OmkoBass 5
  • Multiple sizes implementation in AdMobBanner can be improved

    Multiple sizes implementation in AdMobBanner can be improved

    When you want multiple sizes in AdManager Banner you call <GAMBannerAd> and pass the sizes attribute as an array. However, the element has a mandatory size attribute: this is incorrect according to the SDK docs, in fact you should bu able to pass either a single size or an array of sizes.

    The native implementation also leads to mixed results: the module calls requestAd() after both setSize() and setSizes(), but the requestAd() method only checks for the single size attribute to be non-null, so there's a race condition, if setSize gets called before setSizes you end up with a double call, one with a single size and one with multisize.

    I needed the multisize feature for an app so I quickly fixed it for my own need, but I think the whole element should be refactored a bit to let a caller set multiple or single size and only perform one requestAd() call.

    @wjaykim if you didn't already plan to change this behavior let me know and I will create a more robust PR soon as I can.

    opened by edodusi 5
Releases(2.0.1)
Owner
null
JHusky - Modern native Git hooks made easy for java environments

JHusky Modern native Git hooks made easy for java environments JHusky improves your commits and more ?? Jwoof! Install Include it to your project as a

Pedro Caires 23 Oct 31, 2022
Lightweight React Native UI Components inspired on Vant

vant-react-native Install yarn add vant-react-native Or npm install vant-react-native Usage import React, { Component } from 'react'; import { View, T

洛竹 51 Sep 29, 2022
Sceneform React Native AR Component using ARCore and Google Filament as 3D engine. This the Sceneform Maintained Component for React Native

Discord Server Join us on Discord if you need a hand or just want to talk about Sceneform and AR. Features Remote and local assets Augmented Faces Clo

SceneView Open Community 42 Dec 17, 2022
With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any other file server

React Native In-App update With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any o

Nepein Andrey 7 Dec 21, 2022
React native wrapper for Jitsi Meet SDK Library that rely on the native view (Activity / ViewController)

react-native-jitsi-meet-sdk React native wrapper for Jitsi Meet SDK Library. This Library implements the Jitsi SDK with a native activity on the Andro

null 7 May 2, 2022
An awesome native wheel picker component for React Native.

⛏️ react-native-picky An awesome native wheel picker component for react-native. Features Supports multiple columns ✅ Supports looping ✅ Native Androi

null 28 Dec 4, 2022
Components to control your app status and navigation bars.

➖ react-native-bars Components to control your app status and navigation bars. Heavily inspired by the built-in StatusBar module and react-native-tran

Mathieu Acthernoene 161 Jan 3, 2023
Modular and customizable Material Design UI components for Android

Material Components for Android Material Components for Android (MDC-Android) help developers execute Material Design. Developed by a core team of eng

Material Components 14.4k Jan 3, 2023
A spring cloud infrastructure provides various of commonly used cloud components and auto-configurations for high project consistency

A spring cloud infrastructure provides various of commonly used cloud components and auto-configurations for high project consistency.

Project-Hephaestus 2 Feb 8, 2022
Render After Effects animations natively on Android and iOS, Web, and React Native

Lottie for Android, iOS, React Native, Web, and Windows Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations expo

Airbnb 33.5k Jan 3, 2023
Echo client-server components to evaluate Project Loom virtual threads.

Overview Project Loom is the OpenJDK initiative to introduce user-mode threads in Java. The purpose of this repository is to compare Project Loom virt

Elliot Barlas 15 Nov 1, 2022
A React Native project starter with Typescript, a theme provider with hook to easy styling component, a folder architecture ready and some configs to keep a codebase clean.

React Native Boilerplate Folder structure : src ├── assets │   ├── audios │   ├── fonts │   ├── icons │   └── images ├── components │   ├── Layout.tsx

LazyRabbit 23 Sep 1, 2022
React Native wrapper around Indy SDK Java and Objective-C wrappers.

React Native Indy SDK React Native Indy SDK wrapper. Installation with npm: $ npm install indy-sdk-react-native --save with Yarn: $ yarn add indy-sdk-

Hyperledger 21 Dec 5, 2022
This project is a simple messaging application made using React-Native framework, Gifted-Chat library and Firebase database

This project is a simple messaging application made using React-Native framework, Gifted-Chat library and Firebase database. The example that will be shown here focuses on the ability of two people to message each other in a chat room.

null 3 Jan 30, 2022
WebRTC for React-Native. Allows camera to zoom on the fly while streaming and change max bitrate.

rn-webrtc This repo is forked from react-native-webrtc. A WebRTC module for React Native. Support iOS / macOS / Android. Support Video / Audio / Data

SAURABH KAYASTH A. 7 Aug 7, 2022
A React Native Template for installing a working ClojureScript, Krell, and Storybook environment

A React Native Template for ClojureScript, Krell, and Storybook Getting Started npx react-native init YourProjectName --template react-native-template

Joshua Miller 30 Dec 23, 2022
Ship React Native .jsbundles compressed by Brotli algorithm.

Ship compressed JS bundles Warning: not yet available for Android. Sometimes you need a very small .app, for example if you are building an App Clip.

Ivan Moskalev 37 Nov 15, 2022
Prevent Screenshots in your React Native app when needed. 🦄

React Native Prevent Screenshots Prevent Screenshots in your React Native app when needed. ?? Installation First, you need to install the package usin

Ahmed Mahmoud 64 Oct 19, 2022
Using turborepo & react-native

Turborepo starter with NPM This is an official starter turborepo. What's inside? This turborepo uses NPM as a package manager. It includes the followi

Renan Machado 5 Feb 16, 2022