CODEWITHSUNDEEP
reactjsionic-frameworkcapacitor
PeteSE4
PeteSE4

Reputation: 423

Using capacitor-community/admob without ionic

I've recently migrated my old Cordova iOS/Android project over to Capacitor, and so far very happy with it. However, hit a snag trying to use the AdMob plug in recommended in the Capacitor documentation capacitor-community/admob since the documentation for the plug-in only shows examples for ionic with angular or ionic with react. I'm using neither as the project started outside that ecosystem, so I'm a little clueless looking at this ionic/react example and trying to figure out how to implement it without either of those frameworks.

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet, isPlatform } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';

import { Plugins } from '@capacitor/core';
import { AdOptions, AdSize, AdPosition } from '@capacitor-community/admob';
const { AdMob } = Plugins;

const App: React.FC = () => {

  AdMob.initialize();

  const adId = {
    ios: 'ios-value-here',
    android: 'android-value-here'
  }

  const platformAdId = isPlatform('android') ? adId.android : adId.ios;

  const options: AdOptions = {
    adId: platformAdId,
    adSize: AdSize.BANNER,
    position: AdPosition.BOTTOM_CENTER,
    margin: 0,
    // isTesting: true
  }

  AdMob.showBanner(options);

  // Subscibe Banner Event Listener
  AdMob.addListener('onAdLoaded', (info: boolean) => {
    console.log("Banner ad loaded");
  });

  // Get Banner Size
  AdMob.addListener('onAdSize', (info: boolean) => {
    console.log(info);
  });

  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/home" component={Home} exact={true} />
          <Route exact path="/" render={() => <Redirect to="/home" />} />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );

};

export default App;

I'm hoping that it's just because I'm unfamiliar with ionic/react to know what const App: React.FC = () => { is actually doing, and there's a way of doing it without.

Or, is it just the case that Capacitor Community Plugins only work with Ionic?

Upvotes: 0

Views: 1257

Answers (1)

Muhammed Moussa
Muhammed Moussa

Reputation: 5195

since you are using capacitor, so you can use any Cordova plugin.

npm install cordova-plugin-name
npx cap sync

here is a cordova plugin you can use: https://github.com/ratson/cordova-plugin-admob-free
ref: https://capacitorjs.com/docs/cordova/using-cordova-plugins#installing-cordova-plugins

Upvotes: 0

Related Questions