React Native

https://www.npmjs.com/package/adrop-ads-react-nativewww.npmjs.com

1

사전 준비사항

Adrop은 다음의 환경에서 동작합니다.

• React Native:

  • 0.71 혹은 그 이상 버전을 사용

• 안드로이드 :

  • API 레벨 23(M) 혹은 그 이상을 타겟팅

  • Android 6.0 혹은 그 이상 버전을 사용

    • minSdkVersion 23

  • 다음의 버전을 충족하는 Jetpack (AndroidX)을 사용

    • com.android.tools.build:gradle v7.6.3 버전 이상

      • compileSdkVersion 34

  • Kotlin 2.1.0 버전 이상

• iOS:

  • iOS 13

  • Swift 5.0

• React Native - Setting up the development environment

이제 이메일 또는 구글 계정을 통해 Adrop에 로그인하세요.

2

SDK 설치

npm install adrop-ads-react-native
# 또는 
yarn add adrop-ads-react-native

3

플랫폼별 설정

Android

1. app/build.gradle 추가

apply plugin: "kotlin-android"

1. 프로젝트 빌드

npx react-native run-android

iOS

1. Podfile 수정 (ios/Podfile)

target 'YourApp' do
  use_frameworks!  # 이 줄 추가
end

1. Pod 설치

cd ios && pod install --repo-update && cd ..

1. 프로젝트 빌드

npx react-native run-ios

4

Backfill 광고

Backfill 광고는 직광고가 없을 때, 네트워크 광고(Admob 등)을 표시하는 기능입니다. Backfill 기능을 사용하지 않는다면 이 설정은 건너뛰세요.

중요: Adrop에서 공유받은 애드몹 App ID로 교체해주세요

Android

1. kotlin 2.1.0 이상 사용하세요

2. Maven Repository 추가 (프로젝트 레벨 settings.gradle 또는 build.gradle)

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://artifact.bytedance.com/repository/pangle' } // 추가
    }
}

1. Backfill 의존성 추가 (android/app/build.gradle)

dependencies {
    implementation("io.adrop:adrop-ads-backfill:1.7.2")
}

1. AndroidManifest.xml 추가 (android/app/main/src/AndroidManifest.xml)

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 필수 권한 -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

    <application>
        <!-- AdMob App ID (Backfill 사용 시 필수) -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx"/>
    </application>
</manifest>

iOS

1. Podfile 수정 (ios/Podfile)

target 'YourApp' do
  use_frameworks!

  # Backfill 광고 사용 시 추가
  pod 'adrop-ads-backfill', '>= 1.7.2', '< 1.8.0'
end

1. Info.plist 설정 (ios/YourApp/Info.plist)

<dict>
    <!-- AdMob App ID (Backfill 사용 시 필수) -->
    <key>GADApplicationIdentifier</key>
    <string>ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx</string>
</dict>

1. Pod 재설치

cd ios && pod install --repo-update && cd ..

5

Adrop 초기화

앱 시작 시 SDK를 초기화합니다.

import { Adrop } from 'adrop-ads-react-native';

// 기본 초기화
Adrop.initialize(false);

// 전체 옵션 사용
Adrop.initialize(
  false,           // production: 프로덕션 환경 여부
  ['KR', 'US'],    // targetCountries: 타겟 국가 (선택)
  true             // useInAppBrowser: iOS에서 인앱브라우저 사용 여부 (선택)
);

초기화 파라미터

Parameter	Type	Required	Description
production	BOOLEAN	Y	true: 프로덕션 모드, false: 테스트 모드
targetCountries	ARRAY<STRING>	N	광고를 표시할 국가 코드 배열
useInAppBrowser	BOOLEAN	N	iOS에서 광고 클릭 시 인앱브라우저 사용여부 (default: false)

6

테마 설정 (선택사항)

광고 테마를 설정하려면 setTheme 을 호출하세요

Adrop.setTheme(AdropTheme.AUTO)

테마	설명
AdropTheme.auto	시스템 설정에 따라 자동 전환
AdropTheme.light	라이트 모드
AdropTheme.dart	다크 모드

7

사용자 ID 설정 (선택사항)

앱에서 사용하는 uid를 설정하려면 setUID 을 호출하세요

Adrop.setUID("YOUR_UID")

---

Troubleshooting

iOS Build Error

"Module compield with Swift X.X cannot be imported by Swift Y.Y"

다른 Swift 버전으로 컴파일된 모듈 간 호환성 문제입니다. ios/Podfile 에 다음 설정을 추가하세요

# Add this line to your Podfile
use_frameworks!

# ...
post_install do |installer|
    installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|

        #...
        # Add this line to your Podfile
        config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
        end
    end
end