How do I prevent react-native-device-info causing React ambiguity on my setup?

Question

I'm running into a problem with installing react-native-device-info into an existing react-native project (created using create-react-native-app and then ejecting)

I run:

yarn add react-native-device-info yarn install react-native link react-native-device-info cd ios && pod install & cd ..

pod install installs RNDeviceInfo, but also React as a dependency?

I then run yarn ios as normal.

The MetroBundler fails with:

``` This warning is caused by a @providesModule declaration with the same name across two different files. Loading dependency graph, done. error: bundling failed: ambiguous resolution: module /Users/thomasclarke/dev/mobile-notifications-native/index.js tries to require react-native, but there are several files providing this module. You can delete or fix them:

• /Users/thomasclarke/dev/mobile-notifications-native/ios/Pods/React/package.json
• /Users/thomasclarke/dev/mobile-notifications-native/node_modules/react-native/package.json ```

I've raised a bug report, as this is clearly unacceptable behaviour, but is this something I can work around with my setup?

Answer 1

It turns out that you can link to the react-native in your node_modules, which provides the necessary dependency. This was not done by default in the existing project, so here is the process:

1) Start from "clean" (e.g. with no react-native-device-info behaviour). Having messed around before this, I also found I had to clear out both my node_modules and my ios/Pods directories to clear out the legacy React package.

2) Update your Podfile to link to React (you will also have to add in any relevant subspecs and a separate pod for Yoga)

Here are the lines to add to your podfile: pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'DevSupport', 'Core', 'RCTAnimation', 'RCTImage', 'RCTLinkingIOS', 'RCTSettings', 'RCTText' ] pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

3) Then run react-native link react-native-device-info

This will add react-native-device-info to your Podfile (along with android setup)

pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'

4) Install everything as normal: yarn install cd ios pod install

And you should now have a functioning build!