React Native Integration

MAS supports Android version 4.4.+ (Android API level: 19+) and above

1. Open Your Project-Level build.gradle  and Add the repositories in allprojects section

mavenCentral()
maven { url "https://artifact.bytedance.com/repository/pangle" }
maven { url "https://android-sdk.is.com" }
maven { url "https://sdk.tapjoy.com/" }

Use the code bellow if you need to comply with the Google Family Policy.

mavenCentral()
maven { url "https://android-sdk.is.com" }
maven { url "https://sdk.tapjoy.com/" }

2. Open Your App-Level build.gradle and Add the Relevant Code

1. If you’re only targeting children under 13 years of age, please add this Gradle dependency:

implementation 'com.yodo1.mas:google:4.3.2'

2. If you’re targeting all ages, or 13+, use this Gradle dependency:

implementation 'com.yodo1.mas:full:4.3.2'


3. Add MultiDex property to the defaultConfig Section

defaultConfig {
    ...
    multiDexEnabled true
    ...
}


4. Make sure that minSdkVersion is at least 19 in the defaultConfig Section.

defaultConfig {
   ...
   minSdkVersion 19
   ...
}

3. Support AndroidX

Add this content to the gradle.properties file:

android.useAndroidX=true
android.enableJetifier=true

4. Update your AndroidManifest.xml file

  1. Add your AdMob App ID to your app’s AndroidManifest.xml file by including the <meta-data> tag. Your AdMob App ID can be found under the “details” of your app on MAS Dashboard. Please replace android:value with your own AdMob App ID:
<manifest>
	<application>
	<!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
	<meta-data
		android:name="com.google.android.gms.ads.APPLICATION_ID"
		android:value="YOUR_ADMOB_APP_ID"/>
	</application>
</manifest>
  1. Add the following line to the manifest tag. 
xmlns:tools="http://schemas.android.com/tools"
  1. Add the following lines to the application tag.
tools:replace="android:label"
tools:targetApi="n"

5. Open the gradle.properties file and add following

1. Add following line

android.enableDexingArtifactTransform=false

6. Create a new java file Yodo1MASAds.java under the same directory as MainActivity.java

  1. Add the following line at the top of the newly created java file. Make sure to replace the package name.
package com.companyname.projectname;
  1. Add the following code in the file.
import android.util.Log;

import androidx.annotation.NonNull;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.yodo1.mas.Yodo1Mas;
import com.yodo1.mas.error.Yodo1MasError;
import com.yodo1.mas.event.Yodo1MasAdEvent;
import com.yodo1.mas.helper.model.Yodo1MasAdBuildConfig;

public class Yodo1MASAds extends ReactContextBaseJavaModule {
    Yodo1MASAds(ReactApplicationContext context) {
        super(context);

    }


   
    @ReactMethod
    public void initMasSdk()
    {
          Yodo1MasAdBuildConfig config = new Yodo1MasAdBuildConfig.Builder().enableUserPrivacyDialog(true).build();
        Yodo1Mas.getInstance().setAdBuildConfig(config);
        //Call Delegate Function before Init Sdk:
        intiDelagates();
        Yodo1Mas.getInstance().init(Yodo1MASAds.this.getCurrentActivity(), "5VobAPzYV6", new Yodo1Mas.InitListener() {
            @Override
            public void onMasInitSuccessful() {
            }

            @Override
            public void onMasInitFailed(@NonNull Yodo1MasError error) {
            }
        });
       // showBannerAds();
    }

    @ReactMethod
    public void intiDelagates()
    {
        //Delegate for Banner
        Yodo1Mas.getInstance().setBannerListener(new Yodo1Mas.BannerListener() {
            @Override
            public void onAdOpened(@NonNull Yodo1MasAdEvent event) {

            }

            @Override
            public void onAdError(@NonNull Yodo1MasAdEvent event, @NonNull Yodo1MasError error) {

            }

            @Override
            public void onAdClosed(@NonNull Yodo1MasAdEvent event) {

            }
        });
        //Delegate for Interstitial
        Yodo1Mas.getInstance().setInterstitialListener(new Yodo1Mas.InterstitialListener() {
            @Override
            public void onAdOpened(@NonNull Yodo1MasAdEvent event) {
            }

            @Override
            public void onAdError(@NonNull Yodo1MasAdEvent event, @NonNull Yodo1MasError error) {

            }

            @Override
            public void onAdClosed(@NonNull Yodo1MasAdEvent event) {

            }
        });

        //Delegate for RewardedAds
        Yodo1Mas.getInstance().setRewardListener(new Yodo1Mas.RewardListener() {
            @Override
            public void onAdOpened(@NonNull Yodo1MasAdEvent event) {

            }

            @Override
            public void onAdvertRewardEarned(@NonNull Yodo1MasAdEvent event) {
                
            }

            @Override
            public void onAdError(@NonNull Yodo1MasAdEvent event, @NonNull Yodo1MasError error) {

            }

            @Override
            public void onAdClosed(@NonNull Yodo1MasAdEvent event) {

            }
        });
    }
    @ReactMethod
    public void giveRewardToUsers(int rewardAmount)
    {
        Yodo1Mas.getInstance().setRewardListener(new Yodo1Mas.RewardListener() {
            @Override
            public void onAdOpened(@NonNull Yodo1MasAdEvent event) {

            }

            @Override
            public void onAdvertRewardEarned(@NonNull Yodo1MasAdEvent event) {
                
            }

            @Override
            public void onAdError(@NonNull Yodo1MasAdEvent event, @NonNull Yodo1MasError error) {

            }

            @Override
            public void onAdClosed(@NonNull Yodo1MasAdEvent event) {

            }
        });

    }
    @ReactMethod
public void showBannerAds()
{
    int align = Yodo1Mas.BannerBottom | Yodo1Mas.BannerHorizontalCenter;
    Yodo1Mas.getInstance().showBannerAd(Yodo1MASAds.this.getCurrentActivity());
}

@ReactMethod
public void hideBannerAds()
{
    Yodo1Mas.getInstance().dismissBannerAd();
}

    @ReactMethod
public void showIntertstialAds()
{

    Yodo1Mas.getInstance().showInterstitialAd(Yodo1MASAds.this.getCurrentActivity());
}
    @ReactMethod
public void showRewardedAds()
{
    
    Yodo1Mas.getInstance().showRewardedAd(Yodo1MASAds.this.getCurrentActivity());
}

@Override
public String getName() {
    return "Yodo1MASAds";
}

}

3. Replace YourAppkey by your appkey own in initMasSdk() method.

7. Comply With Legal Frameworks

The following code is already added in Yodo1MASAds.java file. It displays a pop up that asks the users for their age and sets the legal frameworks (COPPA, CCPR, GDPR) accordingly. 

Yodo1MasAdBuildConfig config = new Yodo1MasAdBuildConfig.Builder().enableUserPrivacyDialog(true).build();    
Yodo1Mas.getInstance().setAdBuildConfig(config);

If you want to use your custom agreement and privacy policy, please use the following code.

  1. Custom user agreement (optional)
Yodo1MasAdBuildConfig config = new Yodo1MasAdBuildConfig.Builder().enableUserPrivacyDialog(true).userAgreementUrl("Your user agreement url").build();    
Yodo1Mas.getInstance().setAdBuildConfig(config);
  1. Custom privacy policy (optional)
Yodo1MasAdBuildConfig config = new Yodo1MasAdBuildConfig.Builder().enableUserPrivacyDialog(true).privacyPolicyUrl("Your privacy policy url").build();    
Yodo1Mas.getInstance().setAdBuildConfig(config);

IMPORTANT! Failure to comply with these frameworks can lead to Google Play Store rejecting your game, as well as a negative impact of your game’s monetization.

8. Create a new file named MyAppPackage.java under the same directory as MainActivity.java

  1. Replace the package name.
package com.companyname.projectname;
  1. Add the following code.
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyAppPackage implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new Yodo1MASAds(reactContext));
              return modules;
    }

}

9. In your MainApplication.java file add the following

  1. Locate getPackages() method in ReactNativeHost and add your package.
 @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      packages.add(new MyAppPackage());
      return packages;
    }

10. Import NativeModules from React Native

  1. Open your App.js file and add the following code
import { NativeModules } from 'react-native';
const { Yodo1MASAds } = NativeModules;

11. Show the ads

Check out this screenshot to understand how to initialize MAS and show the ads in in App.js.

Show a banner

Yodo1MASAds.showBannerAds();

Dimiss a banner

Yodo1MASAds.hideBannerAds();

Show an interstitial

Yodo1MASAds.showInterstitialAds();

Show a rewarded video

Yodo1MASAds.showRewardAds();

For next step please test your integration.

Updated on December 6, 2021

Was this article helpful?