[react native] 애드몹 테스트 광고 설정하는 법, 안드로이드 앱 개발 , expo router

1. 구글 애드몹에 앱 추가, 광고 단위 설정

react-native-google-mobile-ads 설치

 

2. app.json에 plugins 에 앱 id 추가

(실제 앱 id 값 넣기)

 "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub- xxx~xxx",
          "iosAppId": "ca-app-pub- xxx~xxx"
        }
      ],

 

 

3. 전체 화면 하단에 배너 광고 넣기 코드

_layout.tsx에 적용

import { BannerAd, BannerAdSize, TestIds } from "react-native-google-mobile-ads";

export default function Layout(): JSX.Element {
  const adUnitId = __DEV__
  ? TestIds.BANNER
  : "ca-app-pub-3940256099942544/9214589741";

<BannerAd
          unitId={adUnitId}
          size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
          requestOptions={{
            requestNonPersonalizedAdsOnly: true,
            networkExtras: {
              collapsible: "bottom",
            },
          }}
        />

 

 

레이아웃 전체 코드

import { Stack } from 'expo-router';
import { 
  Platform, 
  View, 
  ImageBackground, 
  StyleSheet, 
  ImageStyle, 
  ViewStyle 
} from 'react-native';
import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState } from 'react';
import { BannerAd, BannerAdSize, TestIds } from "react-native-google-mobile-ads";

export default function Layout(): JSX.Element {
  const adUnitId = __DEV__
  ? TestIds.BANNER
  : "ca-app-pub-3940256099942544/9214589741";

  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
    
          <Stack
            screenOptions={{
              headerShown: false,
              contentStyle: {
                backgroundColor: 'transparent',
              },
            }}
          />
          <StatusBar style="auto" />

      </View>

      <View style={styles.adContainer}>
      <BannerAd
          unitId={adUnitId}
          size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
          requestOptions={{
            requestNonPersonalizedAdsOnly: true,
            networkExtras: {
              collapsible: "bottom",
            },
          }}
        />
      </View>
    </View>
  );
}

type StylesType = {
  container: ViewStyle;
  contentContainer: ViewStyle;
  backgroundImage: ViewStyle;
  backgroundPattern: ImageStyle;
  adContainer: ViewStyle;
};

const styles = StyleSheet.create<StylesType>({
  container: {
    flex: 1,
  },
  contentContainer: {
    flex: 1,
  },
  backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
  backgroundPattern: {
    resizeMode: 'repeat',
    width: 'auto',
    height: 'auto',
  },
  adContainer: {
    width: '100%',
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 5,
  },
});