Expo managed workflow & EAS - RN APIs

Hi,

I have a generell question about EAS:

So I haven’t really figured out how this whole EAS thing works, but is it true that by switching to EAS (as an expo managed workflow project) it is possible to use any RN library ? (Also the once not supported by expo)

BR,
Marko

Hi @mksquad

In theory yes, but there are always possible issues. Some will be harder than others.

For some, if they do not require any special installation steps, or if they have a built-in Expo Config Plugin, you can just install them and then build with EAS Build.

For others you (or someone else) will need to write a config plugin to make the necessary changes to the code under the android and/or ios directories during the build process.

But even with a plain React Native app you can’t just install any arbitrary dependency. Because a dependency you might want to install might, for example, not be compatible with the version of React Native that you’re using for your app.

It might help your understanding of EAS Build to read through the Android Build Process and the iOS Build Process.

Hi @wodin,
thanks a lot for your response!
Would you happen to know if “react-native-share” would be one of those libraries which wouldn’t need any additional installation steps?
We were thinking to eject to a bare RN workflow just because sharing is so limited in Expo, so it would be very interesting if we could avoid an eject by switching to EAS Build.
BR

It definitely looks that way. The installation instructions (assuming a plain RN app) are basically just “install the npm and then run pod install”. That is automatically handled by EAS Build.

If you are using react-native >= 0.60 you just need to do a simple:

yarn add react-native-share

Or if are using npm:

npm i react-native-share --save`

After that, we need to install the dependencies to use the project on iOS(you can skip this part, if you are using this on Android).

Now run a simple: npx pod-install or cd ios && pod install . After that, you should be able to use the library on both Platforms, iOS and Android.

So for Expo with EAS Build it should be sufficient to just install the NPM and then build with EAS Build.

You will not be able to use Expo Go because of the native code, so you will need to build a dev client to take the place of Expo Go.

Hi @wodin,

thanks so much for your reply.

I’m running into an error when I run APP_ENV=staging eas build -p ios:

Configuring Xcode project
Assigning provisioning profile '*[expo] com.roc8.trppn.stg AppStore 2021-08-30T14:31:41.894Z' (Apple Team ID: [our team ID]) to target 'trppnstaging'
Could not find target 'trppnstaging' in project.pbxproj

Do you have an idea what is going wrong here?

Br

Sorry, I’m not sure. Could you post your app.json and/or app.config.js?

@wodin: of course.

Here is the app-staging.json:

{
  "expo": {
    "name": "trppn-staging",
    "scheme": "trppn-stg",
    "slug": "trppn-staging",
    "privacy": "unlisted",
    "sdkVersion": "43.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.2.2",
    "orientation": "portrait",
    "icon": "./images/appicon.png",
    "splash": {
      "image": "./images/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "bundleIdentifier": "com.roc8.trppn.stg",
      "buildNumber": "1",
      "supportsTablet": true,
      "config": {
        "googleMapsApiKey": [key]
      },
      "infoPlist": {
        "LSApplicationQueriesSchemes": [
          "comgooglemaps",
          "citymapper",
          "uber",
          "lyft",
          "waze"
        ],
        "NSCameraUsageDescription": "...",
        "NSPhotoLibraryUsageDescription": "...",
        "NSLocationWhenInUseUsageDescription": "..."
      }
    },
    "android": {
      "package": "com.roc8.trppnstg",
      "versionCode": 16,
      "useNextNotificationsApi": true,
      "config": {
        "googleMaps": {
          "apiKey": [key]
        }
      },
      "permissions": [
        "ACCESS_COARSE_LOCATION",
        "ACCESS_FINE_LOCATION",
        "CAMERA"
      ]
    },
    "notification": {}
  }
}

and here is the app.config.js:

module.exports = () => {
  if (process.env.APP_ENV === "production") {
    return require("./app-production.json");
  } else if (process.env.APP_ENV === "staging") {
    return require("./app-staging.json");
  } else {
    return require("./app-development.json");
  }
};

Note: I guess it has nothing to do with the “target” error from my post above, but this is the “staging” config and is almost the same as the “production” configuration with the difference that only the production version is in the app store.
We use the staging version for testing via TestFlight

PS: expo build:ios is working

BR

Do you by any chance have an ios directory in your project? If so, you have a bare workflow app and I think the problem is caused by a discrepancy between your staging app.json and the Xcode project files.

See my comment here for some more info:

Given that you have different app.json files for dev/preview/prod I suggest you do the first option. i.e. remove ios and android.

hi @wodin,

no I don’t have any ios/android directory in the project, although I tried the expo run:ios command once, but when the ios folder appeared I reverted back all the changes and deleted all the “new” folders. (Maybe something remained cached?)

Anyway it still tells me:

BR

@wodin maybe any more ideas what I could try?
Br

I suggest you first try it with a new app with static app.json to see if it works there.

I’ve actually just done that and it works for me on an Android device and an iOS Simulator.

Ok I’ll try that @wodin.
Thanks for the suggestion!
Br

Hi @wodin

I managed to get eas running (had to update a lot of packages).

Then I installed and imported react-native-share and tried the instagram story sharing (the same way you did in your project above)

The problem is that on a real device the instagram app is not opening (although installed), which kinda makes sense because in a bare RN project I have to add

<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>instagram</string>
		<string>instagram-stories</string>
	</array>

How can I add those plist values in an expo managed workflow?

PS: tested on dev-client only so far

Br

Hi @mksquad

You’re in luck! You can do this in app.json: app.json / app.config.js - Expo Documentation

Something like this:

{
  "expo": {
    "ios": {
      "infoPlist": {
        "LSApplicationQueriesSchemes": [
          "instagram",
          "instagram-stories"
        ]
      }
    }
  }
}

I haven’t tried the above myself. Let us know how it goes!

1 Like

Yeees it worked :)) Thx so much for the effort @wodin !

1 Like

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.