feat!: Add expo config plugin

invertase · Jul 12, 2024 · 848348f · 848348f
1 parent 6eafe65
commit 848348f
Show file tree

Hide file tree

Showing 17 changed files with 6,225 additions and 3,440 deletions.
diff --git a/android/build.gradle b/android/build.gradle
@@ -74,19 +74,21 @@ project.ext {
 
 apply from: file("./app-json.gradle")
 
-def appJSONGoogleMobileAdsAppIDString
+def rootPackageJson = PackageJson.getForProject(rootProject)
+def isExpoProject = rootPackageJson['dependencies'].containsKey('expo')
+def appJSONGoogleMobileAdsAppIDString = ""
 def appJSONGoogleMobileAdsDelayAppMeasurementInitBool = false
 def appJSONGoogleMobileAdsOptimizeInitializationBool = true
 def appJSONGoogleMobileAdsOptimizeAdLoadingBool = true
 
-if (rootProject.ext.googleMobileAdsJson) {
+if (rootProject.ext.has("googleMobileAdsJson")) {
   appJSONGoogleMobileAdsAppIDString = rootProject.ext.googleMobileAdsJson.getStringValue("android_app_id", "")
   appJSONGoogleMobileAdsDelayAppMeasurementInitBool = rootProject.ext.googleMobileAdsJson.isFlagEnabled("delay_app_measurement_init", false)
   appJSONGoogleMobileAdsOptimizeInitializationBool = rootProject.ext.googleMobileAdsJson.isFlagEnabled("optimize_initialization", true)
   appJSONGoogleMobileAdsOptimizeAdLoadingBool = rootProject.ext.googleMobileAdsJson.isFlagEnabled("optimize_ad_loading", true)
 }
 
-if (!appJSONGoogleMobileAdsAppIDString) {
+if (!appJSONGoogleMobileAdsAppIDString && !isExpoProject) {
   println "\n\n\n"
   println "**************************************************************************************************************"
   println "\n\n\n"

diff --git a/app.plugin.js b/app.plugin.js
@@ -0,0 +1 @@
+module.exports = require('./plugin/build');
diff --git a/docs/european-user-consent.mdx b/docs/european-user-consent.mdx
@@ -79,9 +79,12 @@ npx react-native run-android
 
 If you configure an [ATT message](https://support.google.com/admob/answer/10115331) in your Google AdMob account, the UMP SDK will automatically handle the ATT alert.
 This will also show an IDFA explainer message. If you don't want to show an explainer message you can show the ATT alert [manually](https://docs.page/invertase/react-native-google-mobile-ads#app-tracking-transparency-ios).
-Also, within your projects `app.json` file, you have to use the `user_tracking_usage_description` to to describe your usage:
+Also, within your projects `app.json` file, you have to provide a user tracking usage description (once set, rebuild your application):
+
+#### For React Native projects (without Expo)
 
 ```json
+// <project-root>/app.json
 {
   "react-native-google-mobile-ads": {
     "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
@@ -91,7 +94,25 @@ Also, within your projects `app.json` file, you have to use the `user_tracking_u
 }
 ```
 
-Once set, rebuild your application.
+#### For Expo projects
+
+```json
+// <project-root>/app.json
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-google-mobile-ads",
+        {
+          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
+          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
+          "userTrackingUsageDescription": "This identifier will be used to deliver personalized ads to you."
+        }
+      ]
+    ]
+  }
+}
+```
 
 ### Requesting consent information
 

diff --git a/docs/index.mdx b/docs/index.mdx
@@ -90,66 +90,22 @@ Under the "App settings" menu item, you can find the "App ID":
 
 ![Google AdMob App ID](https://prismic-io.s3.amazonaws.com/invertase%2F52dd6900-108c-47a6-accb-699fde963b99_new+project+%2813%29.jpg)
 
-Within the root of your React Native project, open the `app.json` or (if using Expo) `app.config.js` file and add the
-`android_app_id` & `ios_app_id` keys with the IDs from the Google AdMob console:
+The app IDs for Android and iOS need to be inserted into your apps native code.
+For React Native projects without Expo, you can add the app IDs to the `app.json` file.
+For Expo projects, we provide an [Expo config plugin](https://docs.expo.dev/config-plugins/introduction/).
 
-#### app.json
-
-```json
-// <project-root>/app.json
-{
-  "react-native-google-mobile-ads": {
-    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
-    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
-  }
-}
-```
-
-#### app.config.js
-
-```js
-// <project-root>/app.config.js
-module.exports = {
-  'react-native-google-mobile-ads': {
-    android_app_id: 'ca-app-pub-xxxxxxxx~xxxxxxxx',
-    ios_app_id: 'ca-app-pub-xxxxxxxx~xxxxxxxx',
-  },
-};
-```
-
-If you're an expo user, make sure the `react-native-google-mobile-ads` block is outside of the `expo` block!
-It should look like this:
-
-#### app.json
+#### For React Native projects (without Expo)
 
 ```json
 // <project-root>/app.json
 {
-  "expo": {
-    // ...
-  },
   "react-native-google-mobile-ads": {
     "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
     "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
   }
 }
 ```
 
-#### app.config.js
-
-```js
-// <project-root>/app.config.js
-module.exports = {
-  expo: {
-    // ...
-  },
-  'react-native-google-mobile-ads': {
-    android_app_id: 'ca-app-pub-xxxxxxxx~xxxxxxxx',
-    ios_app_id: 'ca-app-pub-xxxxxxxx~xxxxxxxx',
-  },
-};
-```
-
 For the changes to take effect, rebuild your project:
 
 ```bash
@@ -161,8 +117,30 @@ npx react-native run-ios
 npx react-native run-android
 ```
 
+#### For Expo projects
+
 > ⚠️ This module contains custom native code which is NOT supported by Expo Go
 
+This library contains an Expo config plugin which you must add to your `app.json`, `app.config.js` or `app.config.ts` file.
+For these changes to take effect, your must rebuild your project's native code and install the new build on your device.
+
+```json
+// <project-root>/app.json
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-google-mobile-ads",
+        {
+          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
+          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
+        }
+      ]
+    ]
+  }
+}
+```
+
 If you're using Expo without EAS, run the following commands:
 
 ```bash
@@ -178,10 +156,12 @@ npx expo run:android
 If you're using Expo with EAS, create a new build:
 
 ```bash
+# For online builds
 npx eas-cli build --profile development
-```
 
-Don't forget to install the new build on your device!
+# For local builds
+npx eas-cli build --profile development --local
+```
 
 ### Configure outbound requests
 
@@ -240,11 +220,13 @@ If you are using mediation, you may wish to wait until the promise is settled be
 ### Enable SKAdNetwork to track conversions (iOS)
 
 The Google Mobile Ads SDK supports conversion tracking using Apple's SKAdNetwork, which lets Google and participating third-party buyers attribute an app install even when the IDFA is not available.
-Within your projects `app.json`/`app.config.js` file, add the advised [SKAdNetwork identifiers](https://developers.google.com/ad-manager/mobile-ads-sdk/ios/3p-skadnetworks):
+Within your projects `app.json` file, add the advised [SKAdNetwork identifiers](https://developers.google.com/ad-manager/mobile-ads-sdk/ios/3p-skadnetworks).
+Note that these identifiers are subject to change and should be updated regularly.
 
-#### app.json
+#### For React Native projects (without Expo)
 
 ```json
+// <project-root>/app.json
 {
   "react-native-google-mobile-ads": {
     "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
@@ -304,30 +286,38 @@ Within your projects `app.json`/`app.config.js` file, add the advised [SKAdNetwo
 }
 ```
 
-#### app.config.js
+#### For Expo projects
 
-```js
-module.exports = {
-  'react-native-google-mobile-ads': {
-    android_app_id: 'ca-app-pub-xxxxxxxx~xxxxxxxx',
-    ios_app_id: 'ca-app-pub-xxxxxxxx~xxxxxxxx',
-    sk_ad_network_items: [
-      // list of network ids removed to avoid duplication
-      // please refer to the list in the `app.jaon` configuration section for the list of
-      // network ids you should include here and paste them into your `app.config.js` file
-    ],
-  },
-};
+```json
+// <project-root>/app.json
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-google-mobile-ads",
+        {
+          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
+          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
+          "skAdNetworkItems": [
+            // list of network ids removed to avoid duplication
+            // please refer to the list in the `app.jaon` configuration section above
+          ],
+        }
+      ]
+    ]
+  }
+}
 ```
 
 ### App Tracking Transparency (iOS)
 
 Apple requires apps to display the App Tracking Transparency authorization request for accessing the IDFA (leaving the choice to the user, whether to use personalized or non-personalized ads).
-Within your projects `app.json` or `app.config.js` file, you have to use the `user_tracking_usage_description` to describe your usage:
+Within your projects `app.json` file, you have to provide a user tracking usage description:
 
-#### app.json
+#### For React Native projects (without Expo)
 
 ```json
+// <project-root>/app.json
 {
   "react-native-google-mobile-ads": {
     "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
@@ -337,19 +327,28 @@ Within your projects `app.json` or `app.config.js` file, you have to use the `us
 }
 ```
 
-#### app.config.js
+#### For Expo projects
 
-```js
-module.exports = {
-  'react-native-google-mobile-ads': {
-    android_app_id: 'ca-app-pub-xxxxxxxx~xxxxxxxx',
-    ios_app_id: 'ca-app-pub-xxxxxxxx~xxxxxxxx',
-    user_tracking_usage_description:
-      'This identifier will be used to deliver personalized ads to you.',
-  },
-};
+```json
+// <project-root>/app.json
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-google-mobile-ads",
+        {
+          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
+          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
+          "userTrackingUsageDescription": "This identifier will be used to deliver personalized ads to you."
+        }
+      ]
+    ]
+  }
+}
 ```
 
+#### Requesting App Tracking Transparency authorization
+
 To request the App Tracking Transparency authorization we recommend using the [react-native-permissions](https://github.com/zoontek/react-native-permissions) library or making it part of the UMP consent flow [European User Consent page](/european-user-consent).
 
 ```js

diff --git a/ios_config.sh b/ios_config.sh
@@ -49,6 +49,7 @@ _PLIST_BUDDY=/usr/libexec/PlistBuddy
 _TARGET_PLIST="${BUILT_PRODUCTS_DIR}/${INFOPLIST_PATH}"
 _DSYM_PLIST="${DWARF_DSYM_FOLDER_PATH}/${DWARF_DSYM_FILE_NAME}/Contents/Info.plist"
 _IS_CONFIG_JS=false
+_PACKAGE_JSON_NAME='package.json'
 
 # plist arrays
 _PLIST_ENTRY_KEYS=()
@@ -109,6 +110,15 @@ while true; do
   _CURRENT_LOOKUPS=$((_CURRENT_LOOKUPS+1))
 done
 
+# Bail out if project is using Expo
+_PACKAGE_JSON_PATH=$(dirname "${_SEARCH_RESULT}")/${_PACKAGE_JSON_NAME}
+_IS_PROJECT_USING_EXPO=$(ruby -KU -e "require 'json'; package=JSON.parse(File.read('${_PACKAGE_JSON_PATH}')); puts package['dependencies'].key?('expo')")
+
+if [[ ${_IS_PROJECT_USING_EXPO} == "true" ]]; then
+  echo "info: Expo project detected, assume Expo Config Plugin is used."
+  exit 0
+fi
+
 if [[ ${_SEARCH_RESULT} ]]; then
   if [[ ${_IS_CONFIG_JS} == "true" ]]; then
     _JSON_OUTPUT_RAW=$("${NODE_BINARY}" -e "console.log(JSON.stringify(require('${_SEARCH_RESULT}')));")

diff --git a/jest.config.js b/jest.config.js
@@ -3,5 +3,5 @@ module.exports = {
   modulePathIgnorePatterns: ['<rootDir>/RNGoogleMobileAdsExample/node_modules', '<rootDir>/lib/'],
   setupFiles: ['./jest.setup.ts'],
   testPathIgnorePatterns: ['<rootDir>/RNGoogleMobileAdsExample'],
-  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$',
+  testRegex: '(/__tests__/.*\\.(test|spec))\\.[jt]sx?$',
 };
diff --git a/package.json b/package.json
@@ -30,9 +30,11 @@
     "/docs/",
     "/ios/",
     "/lib/",
+    "/plugin/",
     "/src/",
     "/docs.json",
     "/RNGoogleMobileAds.podspec",
+    "/app.plugin.js",
     "/babel.config.js",
     "/jest.config.js",
     "/jest.setup.ts",
@@ -63,9 +65,10 @@
     ]
   },
   "scripts": {
-    "prepare": "yarn build",
+    "prepare": "yarn build && yarn build:plugin",
     "build": "genversion --es6 --semi src/version.ts && bob build",
-    "build:clean": "rimraf android/build && rimraf ios/build && rimraf lib",
+    "build:clean": "rimraf android/build && rimraf ios/build && rimraf lib && rimraf plugin/build",
+    "build:plugin": "yarn tsc --build plugin",
     "lint:code": "yarn lint:js && yarn lint:android && yarn lint:ios:check",
     "lint:js": "eslint src/ --ext .js,.jsx,.ts,.tsx --max-warnings=0",
     "lint:android": "google-java-format --set-exit-if-changed --replace --glob=\"android/**/*.java\"",
@@ -136,6 +139,8 @@
     "eslint-plugin-mocha": "^10.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.10",
+    "expo": "^47.0.0",
+    "expo-module-scripts": "^3.5.2",
     "genversion": "^3.1.1",
     "google-java-format": "^1.1.0",
     "jest": "^29.2.2",
@@ -148,7 +153,15 @@
     "rimraf": "^3.0.2",
     "semantic-release": "^19.0.5",
     "spellchecker-cli": "^6.1.1",
-    "typescript": "^4.8.4"
+    "typescript": "^5.5.3"
+  },
+  "peerDependencies": {
+    "expo": ">=47.0.0"
+  },
+  "peerDependenciesMeta": {
+    "expo": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"