iOS | Android | Windows |
---|---|---|
Yes | Somewhat. Working on adding delegate methods. | Probably never |
Interstitial Images | Interstitial Videos | Reward Videos | Banners |
---|---|---|---|
Yes | Yes (if you configure it in your Chartboost Dashboard | Yes and no. We don't have an official API to use Chartboost's reward videos. But you can make your own if you setup the logic yourself and simply display Interstitial Videos | No. Chartboost doesn't offer these. |
$ npm install react-native-chartboost --save
$ react-native link react-native-chartboost
Libraries
➜ Add Files to [your project's name]
node_modules
➜ react-native-chartboost
and add RNChartboost.xcodeproj
libRNChartboost.a
to your project's Build Phases
➜ Link Binary With Libraries
react-native link react-native-chartboost
. Part 2/2 still needs to be done manually.android/app/src/main/java/[...]/MainActivity.java
import com.RNChartboost.RNChartboostPackage;
to the imports at the top of the filenew RNChartboostPackage()
to the list returned by the getPackages()
methodandroid/settings.gradle
:
include ':react-native-chartboost'
project(':react-native-chartboost').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-chartboost/android')
android/app/build.gradle
:
compile project(':react-native-chartboost')
MainActivity.java
file. We tried to find a way for it to work after the initial Activity was created, but unfortunately, could not find a way. For this reason, you will need to add this native Java code in your MainActivity.java
file. We override a bunch of methods. First, add these imports to the top of your file if you don't already have them:import com.RNChartboost.RNChartboostPackage;
import android.os.Bundle;
Next, override the following methods as shown below. If you already override them, just make sure you call the RNChartboostPackage methods within them. Technically you only need to the onCreate and onStart methods, but since Chartboost recommends adding all of them, we will:
public class MainActivity extends ReactActivity {
//... whatever you have already
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
RNChartboostPackage.ONCREATE(this, "Chartboost Android appId", "Chartboost Android app Signature");
}
@Override
public void onStart() {
super.onStart();
RNChartboostPackage.ONSTART(this);
}
@Override
public void onResume() {
super.onResume();
RNChartboostPackage.ONRESUME(this);
}
@Override
public void onPause() {
super.onPause();
RNChartboostPackage.ONPAUSE(this);
}
@Override
public void onStop() {
super.onStop();
RNChartboostPackage.ONSTOP(this);
}
@Override
public void onDestroy() {
super.onDestroy();
RNChartboostPackage.ONDESTROY(this);
}
@Override
public void onBackPressed() {
if (RNChartboostPackage.ONBACKPRESSED())
return;
else
super.onBackPressed();
}
}
As you can see, in the onCreate method, you will need to add your app's appId and signature here. These can be found once you've created your Android app on Chartboost's website.
AndroidManifest.xml
file. You'll need to add certain normal permissions (don't worry, you won't need to manually ask the user to accept permissions for normal permission, only dangerous ones). You'll also need to add a chartboost activity
tag inside of application
. Below is basically what you need inside your manifest:<manifest ...blablabla...>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<application ...blababla...>
<activity android:name="com.chartboost.sdk.CBImpressionActivity"
android:excludeFromRecents="true"
android:hardwareAccelerated="true"
android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"
android:configChanges="keyboardHidden|orientation|screenSize" />
</application>
</manifest>
.jar
file that is in this React Natuve Module. Or if you want something above v7.0.1
, you can replace it inside the libs folder.Here is what my Link Binary With Libraries section looks like in Xcode (iOS):
function | example | notes |
---|---|---|
start(appID, signature) | Chartboost.start("54eq1", "47c2ddf") |
Get your appID and signature from the Chartboost dashboard. Make sure to setDelegateMethods first to get notified if initialization is successful. *** Note that for iOS, the appID and signature matters here, but for Android, you need to have that in your MainApplication.java file. But you still need to call start() for android since it will bind your delegate methods. |
setDelegateMethods(callbacks) | Chartboost.setDelegateMethods({ didCacheInterstitial:()=>{ console.log("Successfully Cached"}}) |
You can ignore this function if you don't care about being notified when certain things happen. Or you can add 1, 2, or any number of keys/values to this object for different events. Different events are explained below |
setDelegateMethods supported events | notes |
---|---|
didInitialize | Called when it has been initialized. Sometimes is called more than once (like when it was called, and then a permissions for camera use popup happened). *** Callback will only be called on iOS since the Android Chartboost SDK is initialized in native code before your React Native app has started. |
didDisplayInterstitial | Called after an interstitial has been displayed on the screen. |
didFailToLoadInterstitial | Called after an interstitial has attempted to load from the Chartboost API servers but failed. |
didDismissInterstitial | Called after an interstitial has been dismissed. |
didCloseInterstitial | Called after an interstitial has been closed. |
didClickInterstitial | Called after an interstitial has been clicked. |
didCacheInterstitial | Called after an interstitial has been loaded from the Chartboost API servers and cached locally. |
*** Difference between didDismiss and didClose? When a user tap the X to close the ad, it fires both didCloseInterstitial
and didDismissInterstitial
. When a user taps the ad (and is taken to the AppStore), it fires both didClickInterstitial
and didDismissInterstitial
. So didDismiss is fired both times, so resume music/animations/whatever here. If you want to track if they clicked, or closed, then you can using the didClick/didClose events. I personally never use didClick/didClose.
function | example | notes |
---|---|---|
showInterstitial(location) | Chartboost.showInterstitial("EndOfLevel") |
We recommend caching interstitials first. Otherwise, there may be a slight delay before you are able to display them |
cacheInterstitial(location) | Chartboost.cacheInterstitial("EndOfLevel") |
Caching will help improve performance. Preferably cache a few seconds to a minute before you will be showing the interstitial to reduce data usage, and improve performance. |
*** what is location? This is a string you will use to when it comes to tracking ads. You could pass in an empty string even, but if you want to see more accurate statistics on the Chartboost dashboard, enter in proper strings to help you understand your audience better.
import React, { Component } from 'react'
import { View, Button, TouchableOpacity, Text, Platform, ScrollView, StatusBar} from 'react-native'
import Chartboost from 'react-native-chartboost'
export default class ExampleView extends React.Component {
constructor(props) {
super(props)
this.state = {
chartboostStarted:undefined,
manyCallbacksStatus:"...",
interstitialCached:"Not manually cached",
statusBarHidden:false,
}
}
componentDidMount() {
Chartboost.setDelegateMethods({
didInitialize:(initSuccessful)=>{
this.setState({initSuccessful:initSuccessful})
},
didCacheInterstitial:(location)=>{
this.setState({interstitialCached:"Successfully Cached: " + location})
},
didDisplayInterstitial:(location)=>{
this.setState({manyCallbacksStatus:"Did Display Interstitial",statusBarHidden:true})
},
didFailToLoadInterstitial:(location)=>{
this.setState({manyCallbacksStatus:"Failed to load Interstitial"})
},
didDismissInterstitial:(location)=>{
this.setState({manyCallbacksStatus:"Interstitial dismissed",statusBarHidden:false})
},
didCloseInterstitial:(location)=>{
this.setState({manyCallbacksStatus:"Interstitial closed",statusBarHidden:false})
},
didClickInterstitial:(location)=>{
this.setState({manyCallbacksStatus:"Interstitial clicked - You rich!",statusBarHidden:false})
}
})
// Note that this only works for iOS as for Android, you will need to add native code into your MainActivity.java file
Chartboost.start("5403bd3889b0bb6d9ff085b1", "47c2ddfe01dd7c4e535ae15902dd85ec70bdb672")
}
render() {
return (
<View style={{flex:1}}>
<StatusBar hidden={this.state.statusBarHidden} />
<ScrollView>
<Text style={{marginTop:20,textAlign:"center"}}>
{this.state.chartboostStarted ? "Chartboost has successfully loaded" :
(this.state.chartboostStarted == false ? "Chartboost failed to load" : "Loading Chartboost. . .")}
</Text>
{(this.state.chartboostStarted == true) &&
<View>
<View style={styles.piece}>
<Button title="Show Interstitial" onPress={()=>{
Chartboost.showInterstitial("My Location")
}} />
<Text style={{textAlign:"center",color:"red",fontSize:16}}>
Callbacks Status:
</Text>
<Text style={{textAlign:"center",fontSize:14,marginBottom:14}}>
{this.state.manyCallbacksStatus}
</Text>
</View>
<View style={styles.piece}>
<Button title="Cache Interstitial" onPress={()=>{
this.setState({interstitialCached:"Caching..."})
Chartboost.cacheInterstitial("My Location")
}} />
<Text style={{textAlign:"center"}}>
{this.state.interstitialCached}
</Text>
</View>
</View>
}
</ScrollView>
</View>
)
}
}
const styles = {
piece: {
padding:4,
marginVertical:16,
marginHorizontal:8,
backgroundColor:"rgb(179, 179, 179)",
borderRadius:8,
}
}