How to show ads in a react native app - facebook

Question

There are some react native components for ads but some of them don't work with current versions of react native. (react-native-admob for example). There is a serious lack of information about showing ads in react native and I can't seem to figure out how most people accomplish this. Does everyone really write their own native UI component to accomplish this? Is react-native-admob really the only way to use admob currently? Am I just completely missing some simple way to do this?

Answer 1

You can try with https://github.com/axemclion/react-native-cordova-plugin and https://github.com/appfeel/admob-google-cordova:
$ npm install react-native-cordova-plugin --save
$ node_modules/.bin/cordova-plugin add cordova-plugin-camera cordova-admob
In android/settings.gradle:
include ':app'
+ include ':cordovaplugin'
+ project(':cordovaplugin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-cordova-plugin/framework/android')
In android/app/build.gradle:
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules ...
+ compile project(':cordovaplugin')
}
In android/app/src/main/java/com/appname/MainActivity.java
...
+ import io.cordova.reactnative.CordovaPluginPackage;
...
public class MainActivity extends ReactActivity {
...
#Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
+ cordovaPluginPackage = new CordovaPluginPackage(this)
);
}
+ private CordovaPluginPackage cordovaPluginPackage;
+ #Override
+ protected void onCreate(Bundle savedInstanceState) {
+ super.onCreate(savedInstanceState);
+ cordovaPluginPackage.setSavedInstanceState(savedInstanceState);
+ }
+ #Override
+ public void onActivityResult(int requestCode, int resultCode, Intent intent) {
+ super.onActivityResult(requestCode, resultCode, intent);
+ cordovaPluginPackage.onActivityResult(requestCode, resultCode, intent);
+ }
}
In either index.android.js or any other component:
var Cordova = require('react-native-cordova-plugin');
Cordova.navigator.admob.createBannerView({publisherId: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB"});
Cordova.addEventListener(Cordova.navigator.admob.events.onAdLoaded, onEvent);

Answer 2

react-native-admob was a pain to set up. I was beginning to wonder myself if it was broken. But it isn't, you just need to set up a few things. Set up for Android was my biggest issue, but I found this walkthrough guide to help:
https://pradnyachoudhari.wordpress.com/2019/03/22/integrating-google-admob-in-react-native-android-project/
There are also walkthroughs for IOS.
I followed it and it worked for me, although you won't need to add package to MainApplication.java, just import it and you are good.
Hope this helps!