feat: create expo config plugin (#313)

* feat: create expo config plugin

* chore: update README

* chore: remove duplicated section

* chore: update README

* fix: apply suggestions from code review

Co-authored-by: Evan Bacon <baconbrix@gmail.com>

* fix: fixed plugin imports

Co-authored-by: Evan Bacon <baconbrix@gmail.com>

Author: giautm

README.md

@@ -28,7 +28,7 @@
 
 You must have Facebook developer account in order to start integrating your app with this library. If you don't have one sign up [here](https://developers.facebook.com/).
 
-Follow the instructions on [react-native-fbsdk](https://github.com/facebook/react-native-fbsdk) to integrate the **Facebook SDK** into your project.
+Follow the instructions on [react-native-fbsdk-next](https://github.com/thebergamo/react-native-fbsdk-next) to integrate the **Facebook SDK** into your project.
 
 ### Get a Placement ID
 
@@ -81,6 +81,42 @@ $ react-native link react-native-fbads
 
 </details>
 
+## Expo installation
+
+> This package cannot be used in the "Expo Go" app because [it requires custom native code](https://docs.expo.io/workflow/customizing/).
+
+> First install the package with yarn, npm, or [`expo install`](https://docs.expo.io/workflow/expo-cli/#expo-install).
+
+```sh
+expo install react-native-fbsdk-next react-native-fbads
+```
+
+After installing this npm package, add the [config plugin](https://docs.expo.io/guides/config-plugins/) to the [`plugins`](https://docs.expo.io/versions/latest/config/app/#plugins) array of your `app.json` or `app.config.js`:
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-fbsdk-next",
+        {
+          "appID": "48127127xxxxxxxx",
+          "clientToken": "c5078631e4065b60d7544a95xxxxxxxx",
+          "displayName": "RN SDK Demo",
+          "advertiserIDCollectionEnabled": false,
+          "autoLogAppEventsEnabled": false,
+          "isAutoInitEnabled": true,
+          "iosUserTrackingPermission": "This identifier will be used to deliver personalized ads to you."
+        }
+      ],
+      "react-native-fbads"
+    ]
+  }
+}
+```
+
+Next, rebuild your app as described in the ["Adding custom native code"](https://docs.expo.io/workflow/customizing/) guide.
+
 ## Usage
 
 ### Interstitial Ads

app.plugin.js

@@ -0,0 +1 @@
+module.exports = require("./plugin/build/withReactNativeFbads");

package.json

@@ -13,6 +13,10 @@
     "example": "example"
   },
   "scripts": {
+    "build:plugin": "tsc --build plugin",
+    "clean:plugin": "expo-module clean plugin",
+    "lint:plugin": "eslint plugin/src/*",
+    "prepare": "npm run build:plugin",
     "tsc": "tsc --project .",
     "lint": "tslint --project ."
   },
@@ -22,11 +26,13 @@
     "react-native": "*"
   },
   "dependencies": {
+    "@expo/config-plugins": "^4.0.4",
     "fbemitter": "^2.1.1"
   },
   "devDependencies": {
     "@types/fbemitter": "^2.0.32",
     "@types/react-native": "^0.57.4",
+    "expo-module-scripts": "^2.0.0",
     "tslint": "^5.11.0",
     "tslint-config-airbnb": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",
@@ -46,6 +52,8 @@
     "package.json",
     "dist",
     "react-native.config.js",
-    "ReactNativeAdsFacebook.podspec"
+    "ReactNativeAdsFacebook.podspec",
+    "app.plugin.js",
+    "plugin/build/"
   ]
 }

plugin/src/withReactNativeFbads.ts

@@ -0,0 +1,80 @@
+import {
+  AndroidConfig,
+  ConfigPlugin,
+  createRunOncePlugin,
+  withAndroidManifest,
+} from '@expo/config-plugins';
+const { getMainApplicationOrThrow, prefixAndroidKeys } = AndroidConfig.Manifest;
+
+const INTERSTITIAL_AD_ACTIVITY = 'com.facebook.ads.InterstitialAdActivity';
+
+export const withFacebookManifest: ConfigPlugin = (config) => {
+  return withAndroidManifest(config, (config) => {
+    config.modResults = setFacebookConfig(config.modResults);
+    return config;
+  });
+};
+
+export function setFacebookConfig(
+  androidManifest: AndroidConfig.Manifest.AndroidManifest
+) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let mainApplication = getMainApplicationOrThrow(androidManifest);
+  mainApplication = ensureFacebookActivity({ mainApplication });
+
+  return androidManifest;
+}
+
+function ensureFacebookActivity({
+  mainApplication,
+}: {
+  mainApplication: AndroidConfig.Manifest.ManifestApplication;
+}) {
+  if (Array.isArray(mainApplication.activity)) {
+    // Remove all Facebook InterstitialAdActivity first
+    mainApplication.activity = mainApplication.activity.filter((activity) => {
+      return activity.$?.['android:name'] !== INTERSTITIAL_AD_ACTIVITY;
+    });
+  } else {
+    mainApplication.activity = [];
+  }
+
+  mainApplication.activity.push(getFacebookAdActivity());
+  return mainApplication;
+}
+
+function buildXMLItem({
+  head,
+  children,
+}: {
+  head: Record<string, string>;
+  children?: Record<string, string | any[]>;
+}) {
+  return { ...(children ?? {}), $: head };
+}
+
+function getFacebookAdActivity() {
+  /**
+<activity
+  android:name="com.facebook.ads.InterstitialAdActivity"
+  android:configChanges="keyboardHidden|orientation"
+/>
+   */
+  return buildXMLItem({
+    head: prefixAndroidKeys({
+      name: INTERSTITIAL_AD_ACTIVITY,
+      configChanges: 'keyboardHidden|orientation',
+    }),
+  }) as AndroidConfig.Manifest.ManifestActivity;
+}
+
+/**
+ * Apply react-native-fbads configuration for Expo SDK 44 projects.
+ */
+const withReactNativeFbads: ConfigPlugin = (config) => {
+  return withFacebookManifest(config);
+};
+
+const pkg = require('react-native-fbads/package.json');
+
+export default createRunOncePlugin(withReactNativeFbads, pkg.name, pkg.version);

plugin/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "expo-module-scripts/tsconfig.plugin",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
+}