expo install installs incorrect versions of dependencies

[bsgbryan]

I followed the instructions here to get React Navigation setup.

However, after executing expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view I get the following warnings when I execute npm run ios:

Some of your project's dependencies are not compatible with currently installed expo package version:
 - react-native-reanimated - expected version range: ~1.7.0 - actual version installed: ^1.9.0
 - react-native-safe-area-context - expected version range: 0.7.3 - actual version installed: ^3.0.2
 - @react-native-community/masked-view - expected version range: 0.1.6 - actual version installed: ^0.1.10
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo install [package-name ...]

And I get the following errors:

requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.
- node_modules/react-native/Libraries/ReactNative/getNativeComponentAttributes.js:30:4 in getNativeComponentAttributes
- node_modules/react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js:102:25 in exports.get
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:4097:40 in createInstance
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:15835:12 in completeWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:21822:15 in scheduleRootUpdate
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:23042:20 in ReactNativeRenderer.render
- node_modules/react-native/Libraries/ReactNative/renderApplication.js:52:52 in renderApplication
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:116:10 in runnables.appKey.run
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:197:26 in runApplication
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

Warning: %s: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI., RootErrorBoundary
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:645:36 in warningWithoutStack
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18056:16 in callback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:7595:16 in callCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:7639:19 in commitUpdateEffects
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:7630:22 in commitUpdateQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17116:10 in commitLifeCycles
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20002:23 in commitLayoutEffects
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19768:10 in commitRootImpl
* [native code]:null in commitRootImpl
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19590:4 in commitRoot
* [native code]:null in commitRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:21822:15 in scheduleRootUpdate
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:23042:20 in ReactNativeRenderer.render
- node_modules/react-native/Libraries/ReactNative/renderApplication.js:52:52 in renderApplication
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:116:10 in runnables.appKey.run
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:197:26 in runApplication
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

My expo version is 37.0.7
expo --version shows 3.21.3

[bsgbryan]

Is there anything I can do to help this along?

[bsgbryan]

Doing an expo install react-native-safe-area-context caused the same warning listed above, and my app to crash. So I decided to look into this further.

I tried an expo doctor, but it said everything was fine. Then I tried an expo upgrade. It failed saying there wasn't a valid Expo config. I googled and found out I need an app.json in my project root. Why doesn't Expo add this by default if it is required?

After adding the app.json file I reran expo upgrade and it completed successfully. However, my installed version of react-native-safe-area-context has been downgraded to 0.7.3. The current version is 3.0.2.

Why are these version so far behind?

Again, if there is anything I can do to help fix this I'm happy to!

[bsgbryan]

I am now, after updating to the newest version of expo (3.21.5), getting a another warning about react-native-svg being an incomparable version:

Some of your project's dependencies are not compatible with currently installed expo package version:
 - react-native-svg - expected version range: 11.0.1 - actual version installed: ^12.1.0

[joebochill]

Running into the same issue here. We are using a library that has a peerDependency for react-native-safe-area-context@^3.0.0. Because some of the APIs changed in 1.0.0, the library won't work with the older version...and Expo won't work with the newer one (and you can't have both installed or React Native complains about multiple components with the same name).

Would be great if the next version of Expo addressed some of these long-outdated dependencies.

[bsgbryan]

Commenting to make sure this stays active and open

[brentvatne]

@joebochill - they are not long outdated :) react-native-safe-area-context bumped three major versions over just a couple of days due to some quick breaking changes, we worked with @janicduplessis on it :P we have it bumped already in sdk 38 and it'll be released soon when sdk38 is out. you can see the versions bundled in sdk38 here https://github.com/expo/expo/blob/master/packages/expo/bundledNativeModules.json.

@bsgbryan - my guess is that you are using a bare project? do you have an ios and android directory? if so, expo install just installs the latest version of the package because it assumes that's what you want. this may not be a good assumption to make, though, so perhaps we should revisit. let me know if your project is indeed "bare"

[joebochill]

@brentvatne a few days in the software world can feel like an eternity :) Glad to hear you guys are already on top of it. Thanks for the quick turnaround.

[bsgbryan]

I must say I think it is absolutely ridiculous it took so long to get a reply. And the reply isn't even of any value as, as you stated @brentvatne, your assumption is incorrect. Frankly, this is insulting and unacceptable.

My project is not "bare". expo install installs the wrong version of the dependency like I said in the original posting.

There is a bug in expo. It's that simple. For managed projects, expo install installs the wrong versions of dependencies. If you read through all my comments on this issue you'd understand the situation and all the troubleshooting I did.

I put a lot of effort into providing as much info and context as I could. Your response is really insulting.

[brentvatne]

hey @bsgbryan - please refer to this video that demonstrates expo install as copied from the react navigation documentation working as expected on a new project: https://streamable.com/4unmt1.

now refer to this video that demonstrates expo install on a bare project (notice that i run ls ios and ls android to show you that they exist), and see that it does not pick any specific versions and installs the latest instead, which is what you are observing: https://streamable.com/hz7qsb

i think if you re-read the response i gave above and try to remain objective while doing so you will see that i am just trying to gather information to be able to help you. keep in mind that we offer no guaranteed response window to free users of this tool. we do our best to get back to people as soon as we can, but it's not always possible. if you would like professional support we do offer that, but it's not free: https://expo.io/support

additionally, the best way to provide information on an issue you are encountering is to fill out the issue template. we intentionally structure it in such a way that it helps elicit information that will be useful for us.

in the future, i ask that you please behave on this repository in the same way that you would in a workplace. this is my workplace, and i don't expect to be berated for attempting to try to understand an issue better.

[brentvatne]

i updated expo-cli so that bare apps have the same behavior on expo install as in managed apps: expo/expo-cli@87eec02. it was originally intentionally to have it behave differently in bare apps, but it turns out that this is often confusing and makes it harder to use expo client alongside bare projects, or in cases where people aren't actually sure what workflow they are using (i think that may be happening here but i'm not sure).

if you update to expo-cli@3.21.9 this should work as expected for you based on my diagnosis of the likely problem you are encountering. if it does not, please let me know and we can continue investigating.

[bsgbryan]

I don't understand how I berated you. I would like to understand. From my perspective, I expressed frustration at the time it took to get a response and the response I got. I also confirmed that your assumption was, as you stated was possible, incorrect. What is your perspective?

I am brand new to expo. This is my first app using this toolchain. Prior to this I have built all my React Native app from scratch. I wasn't even aware there was a paid support tier.

I looked for an issue template, but saw none. I don't see a link to one in your comments.

Again, my app is not bare. It is managed. I have neither ios nor android folders. I used create-react-native-app -t with-typescript. I know what workflow I am using.

Actually ... Looking at the readme for create-react-native-app, I am unsure. The content in the Templates section of the readme leads me to believe that create-react-native-app only creates bare-workflow apps unless the template isn't bare? What's confusing to me is: As I said, I don't have ios or android folders. So my project looks like a managed app. And I installed expo-cli because I wanted to use the managed workflow. As far as I can tell, my app looks and behaves like a managed app - which is what I wanted. But maybe the only way to get a managed app is to use expo init (which I was completely unaware of until watching your video)?

One thing that might be helpful is to provide a link to documentation describing how to setup a managed app in the readme. Like, in the Templates section something along the lines of "If you'd like a managed app, you can use expo init" and provide a link to documentation for the expo init command. And provide clear verbiage detailing the differences between bare and managed apps.

Also; I haven't run my app in a simulator yet. I've only used expo start and run on device. Do the ios and android folders only get created when/if an app is run in a simulator/emulator?

[brentvatne]

hey, this took a while to reply as i was not feeling particularly motivated to do that based on the thread up until this point.

I looked for an issue template, but saw none. I don't see a link to one in your comments.

the issue template is what you see when you go to create a new issue, here's a link: https://github.com/expo/expo/issues/new?labels=Issue+needs+review&template=bug_report.md

The content in the Templates section of the readme leads me to believe that create-react-native-app only creates bare-workflow apps unless the template isn't bare?

right, the default template will create a bare app for you. if you pick a different template, it's up to the template itself. this is indeed confusing! i agree.

One thing that might be helpful is to provide a link to documentation describing how to setup a managed app in the readme.

good point, will do! created an issue for it.

Also; I haven't run my app in a simulator yet. I've only used expo start and run on device. Do the ios and android folders only get created when/if an app is run in a simulator/emulator?

they will be created right away when you initialize the project, if you run npx create-react-native-app my-app and choose "Default new app"

---

i'm going to close this issue because i updated expo install in bare apps to work the same as in managed apps, which should address the original concern of the issue. follow up discussion around clarity in crna can be continued in expo/create-react-native-app#844