Skip to main content

React Native Integration

This page guides you through the process of downloading, importing, and configuring the Yodo1 MAS SDK for React Native.

Prerequisites

To integrate the Yodo1 MAS SDK on React Native, you need to meet the following requirements:

  • For Android:
    • Minimum API Level 23 or above
    • Target API Level 33 or above
    • If you use Proguard, please refer to the documentation
  • For iOS:
    • iOS 13.0 or above
    • Xcode 15.2 or above
    • CocoaPods 1.10.0 or above

Android Setup

Configure Dependencies

  1. Update your Project-Level build.gradle with the following repositories:
allprojects {
repositories {
google()
jcenter()
mavenCentral()
maven { url = uri("https://artifact.bytedance.com/repository/pangle/") }
maven { url = uri("https://android-sdk.is.com") }
maven { url = uri("https://dl-maven-android.mintegral.com/repository/mbridge_android_sdk_oversea") }
maven { url = uri("https://artifactory.bidmachine.io/bidmachine") }
maven { url = uri("https://artifacts.applovin.com/android/beta/") }
maven { url = uri("https://ysonetwork.s3.eu-west-3.amazonaws.com/sdk/android") }
}
}
  1. Add dependencies to your app-level build.gradle:
implementation("com.yodo1.mas:full:4.14.2")
implementation("com.google.android.gms:play-services-ads:23.1.0")
implementation("com.google.ads.mediation:pangle:6.0.0.3.0")
implementation("io.bidmachine:ads:2.7.0")

Configure Project Settings

  1. Enable multiDex in build.gradle:
defaultConfig {
multiDexEnabled true
minSdkVersion 21
}
  1. Configure AndroidX and Jetifier in gradle.properties:
android.useAndroidX=true
android.enableJetifier=true
android.enableDexingArtifactTransform=false
  1. Update AndroidManifest.xml:
<manifest xmlns:tools="http://schemas.android.com/tools">
<application
tools:replace="android:label"
tools:targetApi="n">
<!-- Sample AdMob 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>

Setup Native Module

  1. Create Yodo1MASAds.java in your project:

    • Update the package name
    • Replace 'YourAppKey' in initMasSdk() method
  2. Create MyAppPackage.java

    • Update the package name
  3. Update MainApplication.java:

override val reactNativeHost: ReactNativeHost =
object : DefaultReactNativeHost(this) {
override fun getPackages(): List<ReactPackage> =
PackageList(this).packages.apply {
add(MyAppPackage());
}
// ... rest of the configuration
}

iOS Setup

Configure CocoaPods

  1. Add to your Podfile:
source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/Yodo1Games/MAS-Spec.git'

pod 'Yodo1MasFull', '4.13.1'

use_frameworks! :linkage => :static
  1. Install pods:
pod install --repo-update

Configure Info.plist

  1. Add AppLovin SDK Key:
<key>AppLovinSdkKey</key>
<string>xcGD2fy-GdmiZQapx_kUSy5SMKyLoXBk8RyB5u9MVv34KetGdbl4XrXvAUFy0Qg9scKyVTI0NM4i_yzdXih4XE</string>
  1. Configure App Transport Security:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
  1. Add App Tracking Transparency:
<key>NSUserTrackingUsageDescription</key>
<string>This identifier will be used to deliver personalized ads to you.</string>
  1. Add AdMob Configuration:
<key>GADApplicationIdentifier</key>
<string>Your MAS AdMob App ID</string>

<key>GADIsAdManagerApp</key>
<true/>

Setup Native Module

  1. Add Yodo1MASAds.m to your project
    • Replace "YourAppKey" with your actual App Key

JavaScript Integration

  1. Add Yodo1Games.js to your project

  2. Import in your app:

import { NativeModules } from 'react-native';
const { Yodo1MASAds } = NativeModules;

Configure COPPA

Important
  • It's mandatory to use a privacy dialog to comply with store policies
  • If you use MAS built-in privacy dialog, COPPA will be configured automatically
  • If you prefer using your own privacy dialog, you should check the user's age
  • Set COPPA before initializing MAS
// For users under 13
Yodo1MASAds.setCOPPA(true);

// For users 13 and above
Yodo1MASAds.setCOPPA(false);

Configure GDPR

Important
  • It's mandatory to use a privacy dialog to comply with store policies
  • If you use MAS built-in privacy dialog, GDPR will be configured automatically
  • If you prefer using your own privacy dialog, you should check users' age and get consent
  • Set GDPR before initializing MAS
// For users who consent to data collection
Yodo1MASAds.setGDPR(true);

// For users who don't consent or are under 16
Yodo1MASAds.setGDPR(false);

Configure CCPA

Important
  • It's mandatory to use a privacy dialog to comply with store policies
  • If you use MAS built-in privacy dialog, CCPA will be configured automatically
  • If you prefer using your own privacy dialog, you should get users' consent
  • Set CCPA before initializing MAS
// For users who opt out of data collection
Yodo1MASAds.setCCPA(true);

// For users who have not opted out
Yodo1MASAds.setCCPA(false);