[🐛] Expo config issue when using an expo module in bare RN project

[TaylorDale]

What happened?

I use a standalone expo module in my bare RN project ( https://github.com/expo/expo/tree/sdk-49/packages/expo-av#installation-in-bare-react-native-projects )

The new detection method (Check if "expo" module installed) trips the expo config reader, however I don't believe it is working - I tried converting my config over to the expo style app.json config, and I get crashes due to no app ID.

Is being in this halfway house problematic for this new way of reading config files? Does expo "config" carry over to the project if you are using otherwise a react-native only project?

Platforms

Android and iOS

React Native Info

System:
  OS: Windows 11 10.0.22631
  CPU: "(24) x64 AMD Ryzen 9 7900X3D 12-Core Processor          "
  Memory: 47.69 GB / 63.14 GB
Binaries:
  Node:
    version: 20.15.1
    path: ~\AppData\Local\Temp\yarn--1721702036972-0.9765973653990154\node.CMD
  Yarn:
    version: 1.22.15
    path: ~\AppData\Local\Temp\yarn--1721702036972-0.9765973653990154\yarn.CMD
  npm:
    version: 10.7.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowAllTrustedApps: Disabled
    Versions:
      - 10.0.19041.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 16.10.31515.178 (Visual Studio Community 2019)
Languages:
  Java: 17.0.1
  Ruby:
    version: 2.7.8
    path: C:\Ruby27-x64\bin\ruby.EXE
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: 0.74.1
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Are your using Typescript?

• My project is using Typescript

package.json

"expo": "^51.0.8",
    "expo-av": "~14.0.5",
    "react": "18.2.0",
    "react-native-google-mobile-ads": "^14",
    "react-native": "0.74.1",

app.json

{
  "name": "APPNAME",
  "displayName": "APPNAME",
  "react-native-google-mobile-ads": {
    "android_app_id": "ID",
    "ios_app_id": "ID",
    "sk_ad_network_items": ["",""]
}

ios/Podfile

-

android/build.gradle

-

android/app/build.gradle

-

android/settings.gradle

-

AndroidManifest.xml

-

[dylancom]

@DoctorJohn 👀

[DoctorJohn]

I must admit my plan for project setups like this might have been a little short sighted. The current implementation expects any project depending on the expo package to use our expo config plugin. This works for bare RN projects using expo too (via expo prebuild) but I only just realized how inconvenient that is when custom android and ios folders are already in place. In this case they need to be regenerated, which is not a problem for my bare projects but it might be for yours.

Thinking about this for the past few minutes I came up with an alternative way to decide whether our expo config plugin or app.json based configuration workflow should trigger. I started drafting a PR addressing this issue.

[TaylorDale]

custom android and ios folders are already in place

Bang on this is main issue for me.

Appreciate the fix-in-progress.

[DoctorJohn]

Here's a quick update:

Currently ios_config.sh and build.gradle bail out whenever "expo" is listed as a dependency in package.json. This works great for managed expo projects, non-managed expo projects fully relying on prebuild, and bare RN projects without any expo.

To address this issue I originally planned to check whether the top level "react-native-google-mobile-ads" key exists in app.json. However, this makes it harder to warn users when they simply forgot to configure the package.

In my next attempt I tried to rely on npx expo-env-info which outputs whether the project is using the managed expo workflow.

npx expo-env-info output

  expo-env-info 1.2.0 environment info:
    System:
      OS: Linux 6.9 Arch Linux
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 22.5.1 - /usr/bin/node
      Yarn: 1.22.22 - /usr/bin/yarn
      npm: 10.8.2 - /usr/bin/npm
    SDKs:
      Android SDK:
        API Levels: 30, 31, 33, 34
        Build Tools: 30.0.2, 30.0.3, 31.0.0, 33.0.0, 33.0.1, 34.0.0
        System Images: android-27 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-33 | Google Play Intel x86_64 Atom
    IDEs:
      Android Studio: AI-241.18034.62.2411.12071903
    npmPackages:
      expo: ^51.0.0 => 51.0.18 
      react: 18.2.0 => 18.2.0 
      react-native: 0.74.3 => 0.74.3 
    npmGlobalPackages:
      eas-cli: 10.1.1
    Expo Workflow: managed

I just checked the expo-env-info source code to see how they perform that check. All they do is checking whether ios or android folders exists. So I'm going to use this as a condition to differentiate between bare RN projects which should use the old config workflow and managed expo projects which must use the config plugin.

[mikehardy]

🎉 This issue has been resolved in version 14.2.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀