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
- 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") }
}
}
- 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
- Enable multiDex in
build.gradle
:
defaultConfig {
multiDexEnabled true
minSdkVersion 21
}
- Configure AndroidX and Jetifier in
gradle.properties
:
android.useAndroidX=true
android.enableJetifier=true
android.enableDexingArtifactTransform=false
- 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
Create Yodo1MASAds.java in your project:
- Update the package name
- Replace 'YourAppKey' in initMasSdk() method
Create MyAppPackage.java
- Update the package name
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
- 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
- Install pods:
pod install --repo-update
Configure Info.plist
- Add AppLovin SDK Key:
<key>AppLovinSdkKey</key>
<string>xcGD2fy-GdmiZQapx_kUSy5SMKyLoXBk8RyB5u9MVv34KetGdbl4XrXvAUFy0Qg9scKyVTI0NM4i_yzdXih4XE</string>
- Configure App Transport Security:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
- Add App Tracking Transparency:
<key>NSUserTrackingUsageDescription</key>
<string>This identifier will be used to deliver personalized ads to you.</string>
- Add AdMob Configuration:
<key>GADApplicationIdentifier</key>
<string>Your MAS AdMob App ID</string>
<key>GADIsAdManagerApp</key>
<true/>
Setup Native Module
- Add Yodo1MASAds.m to your project
- Replace "YourAppKey" with your actual App Key
JavaScript Integration
Add Yodo1Games.js to your project
Import in your app:
import { NativeModules } from 'react-native';
const { Yodo1MASAds } = NativeModules;
Legal Framework Configuration
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);