CODEWITHSUNDEEP
react-nativeadmob
Waseem Munir
Waseem Munir

Reputation: 60

Integrating admob in react native cli

I am trying to integrate admob in my react native project for days, i have tried many packages from npm but didn't get any success, i used react-native-admob, @react-native-admob/admob and react-native-admob-native. all ended with errors on build. i tried solving the errors too but nothing worked. plus the tutorials on good and youtube, i followed everything but dead end.

The following error is from react-native-admob, and the same kind of error came from @react-native-admob/admob with a different package name of course. i tried different versions of the packages too, ended with same error

\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobBannerViewManager.java:1: error: cannot access com.sbugert.rnadmob
package com.sbugert.rnadmob;
^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:18: error: cannot access java.lang
public class RNAdMobInterstitialAdModule extends ReactContextBaseJavaModule {
       ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:18: error: cannot find symbol
public class RNAdMobInterstitialAdModule extends ReactContextBaseJavaModule {
                                                 ^
  symbol: class ReactContextBaseJavaModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:19: error: cannot find symbol
  InterstitialAd mInterstitialAd;
  ^
  symbol:   class InterstitialAd
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:20: error: cannot find symbol
  String adUnitID;
  ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:21: error: cannot find symbol
  String testDeviceID;
  ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:22: error: cannot find symbol
  Callback requestAdCallback;
  ^
  symbol:   class Callback
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:23: error: cannot find symbol
  Callback showAdCallback;
  ^
  symbol:   class Callback
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:26: error: cannot find symbol
  public String getName() {
         ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:30: error: cannot find symbol
  public RNAdMobInterstitialAdModule(ReactApplicationContext reactContext) {
                                     ^
  symbol:   class ReactApplicationContext
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:82: error: cannot find symbol
  private void sendEvent(String eventName, @Nullable WritableMap params) {
                         ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:82: error: cannot find symbol
  private void sendEvent(String eventName, @Nullable WritableMap params) {
                                                     ^
  symbol:   class WritableMap
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:87: error: cannot find symbol
  public void setAdUnitID(String adUnitID) {
                          ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:92: error: cannot find symbol
  public void setTestDeviceID(String testDeviceID) {
                              ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:97: error: cannot find symbol
  public void requestAd(final Callback callback) {
                              ^
  symbol:   class Callback
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:121: error: cannot find symbol
  public void showAd(final Callback callback) {
                           ^
  symbol:   class Callback
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:136: error: cannot find symbol
  public void isReady(final Callback callback) {
                            ^
  symbol:   class Callback
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:14: error: cannot access com.sbugert
public class RNAdMobPackage implements ReactPackage {
       ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:14: error: cannot find symbol
public class RNAdMobPackage implements ReactPackage {
                                       ^
  symbol: class ReactPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:17: error: cannot find symbol
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
                                                  ^
  symbol:   class ReactApplicationContext
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:17: error: cannot find symbol
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
           ^
  symbol:   class List
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:17: error: cannot find symbol
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
                ^
  symbol:   class NativeModule
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:25: error: cannot find symbol
    public List<Class<? extends JavaScriptModule>> createJSModules() {
           ^
  symbol:   class List
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:25: error: cannot find symbol
    public List<Class<? extends JavaScriptModule>> createJSModules() {
                                ^
  symbol:   class JavaScriptModule
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:30: error: cannot find symbol
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
                                                ^
  symbol:   class ReactApplicationContext
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:30: error: cannot find symbol
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
           ^
  symbol:   class List
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:30: error: cannot find symbol
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
                ^
  symbol:   class ViewManager
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:20: error: cannot access com
public class RNAdMobRewardedVideoAdModule extends ReactContextBaseJavaModule implements RewardedVideoAdListener {
       ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:20: error: cannot find symbol
public class RNAdMobRewardedVideoAdModule extends ReactContextBaseJavaModule implements RewardedVideoAdListener {
                                                  ^
  symbol: class ReactContextBaseJavaModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:20: error: cannot find symbol
public class RNAdMobRewardedVideoAdModule extends ReactContextBaseJavaModule implements RewardedVideoAdListener {
                                                                                        ^
  symbol: class RewardedVideoAdListener
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:21: error: cannot find symbol
    RewardedVideoAd mRewardedVideoAd;
    ^
  symbol:   class RewardedVideoAd
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:24: error: cannot find symbol
    Callback requestAdCallback;
    ^
  symbol:   class Callback
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:25: error: cannot find symbol
    Callback showAdCallback;
    ^
  symbol:   class Callback
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:32: error: cannot find symbol
    public RNAdMobRewardedVideoAdModule(ReactApplicationContext reactContext) {
                                        ^
  symbol:   class ReactApplicationContext
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:37: error: cannot find symbol
    public void onRewarded(RewardItem rewardItem) {
                           ^
  symbol:   class RewardItem
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:97: error: cannot find symbol
    private void sendEvent(String eventName, @Nullable WritableMap params) {
                                                       ^
  symbol:   class WritableMap
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:112: error: cannot find symbol
    public void requestAd(final Callback callback) {
                                ^
  symbol:   class Callback
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:143: error: cannot find symbol
    public void showAd(final Callback callback) {
                             ^
  symbol:   class Callback
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:158: error: cannot find symbol
    public void isReady(final Callback callback) {
                              ^
  symbol:   class Callback
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:3: error: cannot access androidx
import androidx.annotation.Nullable;
       ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:3: error: cannot access androidx.annotation
import androidx.annotation.Nullable;
               ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:3: error: import requires canonical name for Nullable
import androidx.annotation.Nullable;
                          ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:4: error: cannot access android
import android.util.Log;
       ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:4: error: cannot access android.util
import android.util.Log;
              ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:4: error: import requires canonical name for Log
import android.util.Log;
                   ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:6: error: cannot access com.facebook
import com.facebook.react.bridge.Arguments;
          ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:6: error: cannot access com.facebook.react
import com.facebook.react.bridge.Arguments;
                   ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:6: error: import requires canonical name for Arguments
import com.facebook.react.bridge.Arguments;
                                ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:7: error: cannot access com.facebook.react.bridge
import com.facebook.react.bridge.WritableMap;
                         ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:7: error: package com.facebook.react.bridge does not exist
import com.facebook.react.bridge.WritableMap;
                                ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:8: error: cannot access com.facebook.react.common
import com.facebook.react.common.MapBuilder;
                         ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:8: error: package com.facebook.react.common does not exist
import com.facebook.react.common.MapBuilder;
                                ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:9: error: cannot access com.facebook.react.uimanager
import com.facebook.react.uimanager.PixelUtil;
                         ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:9: error: package com.facebook.react.uimanager does not exist
import com.facebook.react.uimanager.PixelUtil;
                                   ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:10: error: cannot access com.facebook.react.uimanager.annotations
import com.facebook.react.uimanager.annotations.ReactProp;
                                   ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:10: error: package com.facebook.react.uimanager.annotations does not exist
import com.facebook.react.uimanager.annotations.ReactProp;
                                               ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:11: error: package com.facebook.react.uimanager does not exist
import com.facebook.react.uimanager.SimpleViewManager;
                                   ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:12: error: package com.facebook.react.uimanager does not exist
import com.facebook.react.uimanager.ThemedReactContext;
                                   ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:13: error: cannot access com.facebook.react.uimanager.events
import com.facebook.react.uimanager.events.RCTEventEmitter;
                                   ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:13: error: package com.facebook.react.uimanager.events does not exist
import com.facebook.react.uimanager.events.RCTEventEmitter;
                                          ^

Upvotes: 0

Views: 820

Answers (4)

Waseem Munir
Waseem Munir

Reputation: 60

This error occurs because of a problem in gradle, on windows Go to /Users/{USER_NAME}/.gradle, delete all folders and files in this folder and run again, this will solve the issue

Upvotes: 1

nv08
nv08

Reputation: 36

So I ran into Admob issue just few days back and was able to solve it. Follow the exact procedure and let me know if stuck.

  1. Take your project back to last working and building state.
  2. npm i react-native-google-mobile-ads
  3. Make a app.json file with values { "react-native-google-mobile-ads": { "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx", "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx" } }
  4. If your minCompileSDK version is <31. Then write this within your app/build.gradle configurations.all { resolutionStrategy { force 'androidx.work:work-runtime:2.6.0'} }
  5. Rebuild your project and use it the way docs suggest. You would be able to make it.

Docs link:- https://docs.page/invertase/react-native-google-mobile-ads

Note:- react-native-admob is deprecated.

Upvotes: 1

Bek Roz
Bek Roz

Reputation: 857

Try to link your packages to android folder and clean gradlew, by running following commands:

To link your dependencies:

react-native link

To clean gradlew go to your project directory and:

cd android && ./gradlew clean

Also make sure you've added your AdMob App id to AndroidManifest.xml file. It's described in the Google Mobile Ads SDK documentation.

Google Mobile Ads SDK docs: https://developers.google.com/admob/android/quick-start#configure_your_app

Upvotes: 2

Aman Deep
Aman Deep

Reputation: 380

I have done in a few projects with Below package

Here is npm link

@react-native-admob/admob

import { View, Text } from 'react-native'
import React,{useEffect} from 'react'
import {
    FullScreenAdOptions,
    TestIds,
    useRewardedInterstitialAd,
    useRewardedAd,
  } from '@react-native-admob/admob';

  const hookOptions = {
    loadOnDismissed: true,
    requestOptions: {
      requestNonPersonalizedAdsOnly: true, 
    },
  };
export default function MyComponent() {

    const {adLoaded, adDismissed, reward, show, adLoadError,adPresented} = useRewardedAd(
        TestIds.REWARDED,// replace your ads ID
     hookOptions,
  );

     useEffect(() => {
        //some condition 
        if(adLoaded){
            show()
        }
     }, [you_dependencncy])
     
    
  return (
    <View>
      <Text>MyComponent</Text>
    </View>
  )
}

Upvotes: 1

Related Questions