Feature: Create Expo plugin

[cbridges1]

Added capability to use this package in a custom EAS development build.

[ammarahm-ed]

Hey, is this ready?

[cbridges1]

Hey, is this ready?

Yes, this can be tested by first creating a sample expo app and installing the react-native-admob-native-ads package. After that you will want to run the prepare script for this project (in a Linux or macOS environment) then add the following files/directories to the node_modules/react-native-admob-native-ads folder of your sample expo app:

tsconfig.json
app.plugin.js
/plugin

From there add the below to the app.json file in the sample app replacing the app IDs with valid values:

{
 "expo": {
   "plugins": [
     [
       "react-native-admob-native-ads",
       {
         "androidAppId":  "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy",
         "iosAppId":  "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"
       }
     ]
   ]
 }
}

Then run ‘expo prebuild’ to generate the corresponding iOS and android apps. The apps generated should have all of the necessary modifications that are normally needed to use this package.

[cbridges1]

@ammarahm-ed Feel free to reach out if you need assistance with this change. I am more than happy to help!

[andresribeiro]

👀

[jessypouliot98]

Is this supposed to work with Expo Go ?

I'm getting the following issue ATM when running expo start

$ expo start
PluginError: Package "react-native-admob-native-ads" does not contain a valid config plugin.
Learn more: https://docs.expo.dev/guides/config-plugins/#creating-a-plugin

Cannot use import statement outside a module
/PROJECT_DIR/node_modules/react-native-admob-native-ads/index.js:1
import IconView from './src/IconView';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)

app.json plugins

{
    "plugins": [
      "expo-community-flipper",
      "sentry-expo",
      ["expo-tracking-transparency", {
        "userTrackingPermission": "This identifier will be used to deliver personalized ads to you."
      }],
      ["react-native-admob-native-ads", {
        "androidAppId": "same-as-ios-im-just-trying-to-figure-out-ios-right-now",
        "iosAppId": "ca-app-pub-...~..."
      }]
    ],
}

Have anyone experienced this and was able to fix it ?

PS: Maybe this is usefull info, I used a 1:1 fork of this in my own repo

[jaseaman]

Any update on this one? Is there anything that we can do to get this one merged :)

[cbridges1]

Is this supposed to work with Expo Go ?

I'm getting the following issue ATM when running expo start

$ expo start
PluginError: Package "react-native-admob-native-ads" does not contain a valid config plugin.
Learn more: https://docs.expo.dev/guides/config-plugins/#creating-a-plugin

Cannot use import statement outside a module
/PROJECT_DIR/node_modules/react-native-admob-native-ads/index.js:1
import IconView from './src/IconView';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)

app.json plugins

{
    "plugins": [
      "expo-community-flipper",
      "sentry-expo",
      ["expo-tracking-transparency", {
        "userTrackingPermission": "This identifier will be used to deliver personalized ads to you."
      }],
      ["react-native-admob-native-ads", {
        "androidAppId": "same-as-ios-im-just-trying-to-figure-out-ios-right-now",
        "iosAppId": "ca-app-pub-...~..."
      }]
    ],
}

Have anyone experienced this and was able to fix it ?

PS: Maybe this is usefull info, I used a 1:1 fork of this in my own repo

You will need to create a custom EAS build (custom Expo Go app). Until this change is merged you will have to move and reference the files manually. Clone this repo and move the withAdmobNativeAds directory to the root of your project. Make sure you install the react-native-admob-native-ads package then update your plugin reference to look like the below:

[
    "./withAdmobNativeAds",
    {
         "androidAppId": "same-as-ios-im-just-trying-to-figure-out-ios-right-now",
         "iosAppId": "ca-app-pub-...~..."
    },
],

Then run the command to create a custom EAS build. Something like: eas build --platform android

Reference for custom EAS builds can be found here.

[fipster-dev]

Nice work @cbridges1 🙌

Any chance of some eyes on this one @ammarahm-ed - it's good to go - just needs merging it seems 👀 You'd be doing us all a great service by giving this a few mins of your time 🙏

[RoccoDocco]

Thank you for the merge! Whats the best way to implement this for EAS builds now after the merge? @cbridges1

[cbridges1]

I made a mistake on the npm prepare step in the package.json. I have since corrected it as well as the change to index.d.ts that my commit removed. I have also removed the references to the Facebook classes that are no longer present in googleads/googleads-mobile-android-mediation. According to this issue it had to be removed due to Meta Audience Network no longer serving waterfall mediation ad requests. As a result, the change should fix any issues with we are currently experiencing for Android installations. You can test these changes by installing the library directly from my repo using:

npm install https://github.com/cbridges1/react-native-admob-native-ads.git#master

For creating EAS expo builds add the plugin config to the app.config.js or app.json:

{
  "expo": {
    "plugins": [
      [
        "react-native-admob-native-ads",
        {
          "androidAppId":  "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy",
          "iosAppId":  "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"
        }
      ]
    ]
  }
}

Everyone please let me know if these fixes are working and I will submit a pull request!

[dhatGuy]

@cbridges1 yes, it works

[cbridges1]

@cbridges1 yes, it works

Thank you for verifying!