-
-
Save novalagung/78d1cfab8b47c024f6919f4c386cffa8 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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