React Native expo admob 세팅하는법

React Native expo 프로젝트에 구글 admob 광고를 넣는 방법을 정리해야겠다.

매번 만드는데 맨날 까먹어서 찾아본다.

 

1. expo 프로젝트 만들기

npx create-expo-app -t expo-template-blank-typescript .

 

타입스크립트 템플릿으로 나는 만들어준다.

 

2. 구글 애드몹 세팅

2-1. react-native-google-mobile-ads 설치

npm i react-native-google-mobile-ads

 

2-2. app.json 코드 추가

  {
    ...
    
    "react-native-google-mobile-ads": {
      "android_app_id": "ca-app-pub-xxxxxxxxxxxxxxxxxxxx"
    }
    
    ...
  
  }

위에는 안드로이드일때이고, 아이폰의 경우 app.json에 몇줄더 추가해줘야한다.

 

공식문서다.

https://docs.page/invertase/react-native-google-mobile-ads

 

2-3. admob 홈페이지 가서 앱 생성후 아이디 발급 받아서 위의 코드에 넣는다.

 

3. expo-dev-client 로 빌드

이러고 배너나 광고 코드넣고 npm run start 하면 될 것 같지만 안된다.

expo-dev-client 로 빌드 후 빌드된 파일을 휴대폰에 설치하고, 로컬로 서버를 켜서 들어가야 구글 광고가 뜨게된다.

 

3-1. expo-dev-client 설치

npm i expo-dev-client

3-1-1. import

import "expo-dev-client";

3-2. 빌드

eas build --profile development --platform android

공식문서다.

https://docs.expo.dev/develop/development-builds/create-a-build/

 

빌드 명령어를 실행하면, expo로 로그인을 하게 된다. 그러고나면,

https://expo.dev/

여기에 방금 올린 프로젝트가 푸쉬되게 되고, 빌드가 완료된 파일이 나오게 된다.

그러면 그걸 휴대폰에 다운 받은 후에 

 

4. 실행

expo start --dev-client

 

이제 구글 광고 코드를 넣으면 광고가 잘나오게 된다.

 

광고 코드는 광고 종류별로 공식홈페이지에서 찾아볼 수 있다!

https://docs.page/invertase/react-native-google-mobile-ads

1인 개발자들 화이팅 합시당