Skip to content

Instantly share code, notes, and snippets.

@kritikinfo
Last active October 18, 2019 08:49
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kritikinfo/1bc92d2a07b3b1516a9d to your computer and use it in GitHub Desktop.
Save kritikinfo/1bc92d2a07b3b1516a9d to your computer and use it in GitHub Desktop.
gist showing Admob Banner Ad use within react native. It's not perfect, but it works. Not included: build.gradle which needs dependency on play-services-ads.
var { PropTypes, requireNativeComponent } = require('react-native');
var React = require('react-native')
var {
StyleSheet,
View,
} = React;
var iface = {
name: 'AdmobView',
propTypes : {
pubId: React.PropTypes.string,
loadAd: React.PropTypes.bool,
renderToHardwareTextureAndroid: React.PropTypes.bool,
onLayout: React.PropTypes.func,
importantForAccessibility: React.PropTypes.bool,
accessibilityLiveRegion: React.PropTypes.string,
accessibilityComponentType: React.PropTypes.string,
accessibilityLabel: React.PropTypes.string,
testID: React.PropTypes.string,
}
}
const AdMobView = requireNativeComponent('RCTAdmobView', iface);
var AdUnit = React.createClass({
propTypes: {
pubId : React.PropTypes.string,
},
getInitialState: function() {
return {
rendered : false,
};
},
componentDidMount : function() {
this.setState({
rendered : true,
});
},
render: function() {
return (
<View collapsable={false} style={styles.adcontainer}>
<AdMobView ref="adView" style={styles.ad} pubId={this.props.pubId} >
</AdMobView>
</View>);
},
});
var styles = StyleSheet.create({
adcontainer: {
minWidth: 320,
minHeight: 50,
width: 320,
height: 50,
backgroundColor: '#CCCCCC',
},
ad: {
minWidth: 320,
minHeight: 50,
width: 320,
height: 50,
backgroundColor: '#CCCCCC',
},
})
module.exports = AdUnit
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions,
} = React;
var AdUnit = require('./AndroidAdmobView');
var admobe = React.createClass({
render: function() {
// pubId below is test pub ID for banner ads per https://developers.google.com/admob/android/quick-start
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js hehe
</Text>
<AdUnit pubId="ca-app-pub-3940256099942544/6300978111"></AdUnit>
<Text style={styles.instructions}>
Shake or press menu button for dev meno
</Text>
<AdUnit pubId="ca-app-pub-3940256099942544/6300978111"></AdUnit>
</View>
);
},
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('admobe', () => admobe);
package com.admobe;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new ReactAdMobPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "admobe", null);
setContentView(mReactRootView);
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onResume(this, this);
}
}
}
package com.admobe;
import android.util.Log;
import com.facebook.react.uimanager.ReactProp;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.google.android.gms.ads.AdListener;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdSize;
import com.google.android.gms.ads.AdView;
public class ReactAdmobManager extends
SimpleViewManager<AdView> {
private String mAdUnitId;
public static final String REACT_CLASS = "RCTAdmobView";
private ThemedReactContext mReactContext;
/** prop to set pubId and load the Ad */
@ReactProp(name="pubId")
public void setPubId(AdView view, String pubId) {
Log.d(REACT_CLASS, "Setting Pub Id to " + pubId);
this.mAdUnitId = pubId;
loadAd(view);
}
/** dummy prop */
@ReactProp(name = "loadAd", defaultBoolean = true)
public void setLoadAd(AdView view, Boolean load) {
Log.d(REACT_CLASS, "inside set src");
if (load == true && mReactContext != null) {
Log.d(REACT_CLASS, "loaded ad");
}
}
@Override
public String getName() {
return REACT_CLASS;
}
@Override
protected AdView createViewInstance(final ThemedReactContext reactContext) {
Log.d(REACT_CLASS, "inside create view");
this.mReactContext = reactContext;
Log.d(REACT_CLASS, "the ad unit ID is: " + mAdUnitId);
final AdView adView = new AdView(this.mReactContext);
loadAd(adView);
return adView;
}
void loadAd(final AdView adView) {
Log.d(REACT_CLASS, "Sending Add with PubId: " + mAdUnitId);
if (adView.getAdSize() == null) {
adView.setAdSize(AdSize.BANNER);
}
if (adView.getAdUnitId() == null && mAdUnitId != null) {
adView.setAdUnitId(this.mAdUnitId);
}
AdRequest adRequest = new AdRequest.Builder()
.addTestDevice("YOURTESTDEVICENUMBER")
.build();
adView.setAdListener(new AdListener() {
@Override
public void onAdLoaded() {
super.onAdLoaded();
Log.d(REACT_CLASS, "onAdloaded");
int width = AdSize.BANNER.getWidthInPixels(mReactContext);
int height = AdSize.BANNER.getHeightInPixels(mReactContext);
adView.measure(width, height);
adView.layout(0, 0, width, height);
}
@Override
public void onAdFailedToLoad(int errorCode) {
super.onAdFailedToLoad(errorCode);
Log.d(REACT_CLASS, "failed" + errorCode);
}
});
if (this.mAdUnitId != null) {
adView.loadAd(adRequest);
}
}
}
package com.admobe;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;
public class ReactAdMobPackage
implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(new ReactAdmobManager());
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment