diff --git a/with-admob/.gitignore b/with-admob/.gitignore new file mode 100644 index 00000000..f119061b --- /dev/null +++ b/with-admob/.gitignore @@ -0,0 +1,39 @@ +# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files + +# dependencies +node_modules/ + +# Expo +.expo/ +dist/ +web-build/ +expo-env.d.ts + +# Native +*.orig.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision + +# Metro +.metro-health-check* + +# debug +npm-debug.* +yarn-debug.* +yarn-error.* + +# macOS +.DS_Store +*.pem + +# local env files +.env*.local + +# typescript +*.tsbuildinfo + +ios/ +android/ diff --git a/with-admob/App.tsx b/with-admob/App.tsx new file mode 100644 index 00000000..3603b1a7 --- /dev/null +++ b/with-admob/App.tsx @@ -0,0 +1,29 @@ +import { useEffect } from "react"; +import { StyleSheet, Text, View } from "react-native"; +import mobileAds from "react-native-google-mobile-ads"; +import { initializeMobileAds } from "./mobileAds"; +import { AdBanner } from "./components/AdBanner"; + +export default function App() { + useEffect(() => { + (async () => { + await initializeMobileAds(); + })(); + }, []); + + return ( + + Open up App.tsx to start working on your app! + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#fff", + alignItems: "center", + justifyContent: "center", + }, +}); diff --git a/with-admob/README.md b/with-admob/README.md new file mode 100644 index 00000000..803ce8be --- /dev/null +++ b/with-admob/README.md @@ -0,0 +1,58 @@ +# AdMob Example with Expo + +This example demonstrates how to integrate Google AdMob into an Expo React Native application. It shows how to display both banner and interstitial ads in your mobile app. + +## Prerequisites + +- Node.js (LTS version recommended) +- Expo CLI +- iOS Simulator (for iOS testing) +- Android Emulator (for Android testing) +- Google AdMob account + +## Installation + +1. Install the required dependencies: + +```sh +# Install Google Mobile Ads SDK +npm install react-native-google-mobile-ads + +``` + +2. Configure your AdMob app ID in your app configuration. + +- Update `app.json` with your AdMob `iosAppId` and `androidAppId` + +## Running the Example + +To run the example on iOS: + +```sh +npx expo run:ios +``` + +To run the example on Android: + +```sh +npx expo run:android +``` + +## Features + +- Banner ads integration +- Interstitial ads implementation +- Ad unit configuration +- Ad loading and display handling + +## Important Notes + +- Make sure to replace the example ad unit IDs with your own AdMob ad unit IDs +- Test ads are used by default in development +- Follow Google's AdMob policies and guidelines when implementing ads + +## Additional Resources + +- [Expo Documentation](https://docs.expo.dev) +- [Google Mobile Ads SDK Documentation](https://developers.google.com/admob/react-native/quick-start) +- [AdMob Policies](https://support.google.com/admob/answer/6128543) diff --git a/with-admob/app.json b/with-admob/app.json new file mode 100644 index 00000000..24964881 --- /dev/null +++ b/with-admob/app.json @@ -0,0 +1,24 @@ +{ + "name": "admob", + "slug": "admob", + "plugins": [ + [ + "react-native-google-mobile-ads", + { + "iosAppId": "ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx", + "androidAppId": "ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx" + } + ] + ], + "ios": { + "bundleIdentifier": "com.reinaldolejr.withadmob", + "infoPlist": { + "ITSAppUsesNonExemptEncryption": false, + "UIBackgroundModes": ["fetch", "remote-notification"] + }, + "entitlements": { + "aps-environment": "development" + }, + "jsEngine": "jsc" + } +} diff --git a/with-admob/components/AdBanner.tsx b/with-admob/components/AdBanner.tsx new file mode 100644 index 00000000..508f474f --- /dev/null +++ b/with-admob/components/AdBanner.tsx @@ -0,0 +1,60 @@ +import * as React from "react"; +import { View, Platform } from "react-native"; +import * as mobileAds from "react-native-google-mobile-ads"; +import { + BannerAd, + BannerAdSize, + TestIds, +} from "react-native-google-mobile-ads"; + +interface AdBannerProps { + containerStyle?: React.ComponentProps["style"]; +} + +const adUnitId = getAdUnitId("banner"); + +/** + * Custom AdBanner component for displaying Google Mobile Ads banner + * This component provides a placeholder for banner ads + * Due to TypeScript errors with direct BannerAd use, we're using a wrapper component + */ +export function AdBanner({ containerStyle }: AdBannerProps) { + + return ( + + {/* Ad space - actual implementation via native code */} + + {/* You can use this as a placeholder while rebuilding with native AdMob integration */} + + ); +} + +export function getAdUnitId(adType: "banner" | "interstitial" | "rewarded") { + // Return test IDs + if (adType === "banner") return mobileAds.TestIds.BANNER; + if (adType === "interstitial") return mobileAds.TestIds.INTERSTITIAL; + if (adType === "rewarded") return mobileAds.TestIds.REWARDED; + + // Fallback to test ID + return mobileAds.TestIds.BANNER; +} diff --git a/with-admob/mobileAds.ts b/with-admob/mobileAds.ts new file mode 100644 index 00000000..4c63a0f4 --- /dev/null +++ b/with-admob/mobileAds.ts @@ -0,0 +1,23 @@ +import { MobileAds, MaxAdContentRating } from 'react-native-google-mobile-ads'; + +export const initializeMobileAds = async () => { + try { + await MobileAds().initialize(); + + // Configure ad content ratings + await MobileAds().setRequestConfiguration({ + // Set your content rating + maxAdContentRating: MaxAdContentRating.PG, + // Specify if ads should be for children + tagForChildDirectedTreatment: false, + // Specify if ads should be for users under the age of consent + tagForUnderAgeOfConsent: false, + // Whether to request non-personalized ads + testDeviceIdentifiers: ['EMULATOR'], + }); + + console.log('Mobile Ads initialized successfully'); + } catch (error) { + console.error('Failed to initialize Mobile Ads:', error); + } +}; \ No newline at end of file diff --git a/with-admob/package.json b/with-admob/package.json new file mode 100644 index 00000000..d25056ba --- /dev/null +++ b/with-admob/package.json @@ -0,0 +1,37 @@ +{ + "dependencies": { + "expo": "^53.0.4", + "hermes-engine": "^0.11.0", + "react": "19.0.0", + "react-dom": "19.0.0", + "react-native": "0.79.1", + "react-native-google-mobile-ads": "^15.2.0", + "react-native-web": "^0.20.0" + }, + "devDependencies": { + "@babel/core": "^7.19.3", + "@types/react": "~19.0.10", + "@types/react-native": "~0.70.6", + "typescript": "~5.8.3" + }, + "name": "with-admob", + "version": "1.0.0", + "private": true, + "scripts": { + "start": "expo start", + "android": "expo run:android", + "ios": "expo run:ios", + "web": "expo start --web" + }, + "expo": { + "doctor": { + "reactNativeDirectoryCheck": { + "exclude": [ + "eas-cli", + "hermes-engine" + ], + "listUnknownPackages": false + } + } + } +} diff --git a/with-admob/tsconfig.json b/with-admob/tsconfig.json new file mode 100644 index 00000000..0e6371f6 --- /dev/null +++ b/with-admob/tsconfig.json @@ -0,0 +1,4 @@ +{ + "compilerOptions": {}, + "extends": "expo/tsconfig.base" +}