Upgrading React Native v0.59 to v0.62
A year ago, I was building an iOS app using React-Native & Firebase. I made sure I was on the latest RN release as I knew these upgrades on react-native can get messy.
All was great, react-native linking, cocoa-pods install, until I left it for a year…
A few days ago, when I tried to revive what’s left of it and consulted a friend, I realised making the iOS build pass again is not going to be quick.
I’m going to walk you through some of the challenges I’ve encountered, knowing there’s probably thousands more, hopefully some of it will help some of you with your migrations.
tl;dr
- Manually upgrade to the desired release and make the required changes using the react-native-upgrader .
- Upgrade to the newest react-native-firebase (the migration from 5.x to 6.x requires some attention)
- Sync cocoapods (
pod install && pod update
) - Build project (
npx react-native run-ios
) - (Fix failures)
Want to read this story later? Save it in Journal.
First step - Manual Changes:
- One of the winning argument in favour of react-native compared to Flutter is its community. They’ve built the react-native-upgrader, a nice tool for assisting engineers making these existing-project-migrations.
- Here I suggest to upgrade to the newest release. no one likes to make these migration, so make this time counts for the longest possible.
- Notice that the tool gives you a full project, so carefully when migrate files that you touched, not to delete important features from your project (podfile, App.js .. )
React Native Firebase Upgrade
- In case you’re using React Native Firebase v5 and below, use this opportunity to upgrade to 6.x.x.
- The community comes to rescue again, with these detailed upgrade instructions
Podfile (CocoaPods)
The Podfile is a specification that describes the dependencies of the targets of one or more Xcode projects (taken from the cocoapods guide)
- React-Native now uses Cocoapods by default which means no “react-native link {package-name}” should be run.
- We should still verify that all pods in the podfile have a .podspec file in the corresponding package folder under node_modules, and specify the path on the podfile:
pod 'react-native-camera', path: '../node_modules/react-native-camera'pod 'React-ART', :path => '../node_modules/react-native/Libraries/ART'
- If a package doesn’t have a .podspec file, try upgrading to a newest version of that package that supports Cocapods. If it’s still missing, add it manually .
- Run, like always:
pod install && pod update
Build
npx react-native run-ios
if this works for you.. well, you’re the luckiest engineer. Please comment below so I’d know it actually happened.
Build failures I’ve encountered
- [FAIL] id: library not found for -l{lib-name}
error: linker command failed with exit code 1 (use -v to see invokation)
- Add all new libraries to Build Phases -> Link Binary With Libraries (see screenshot), based on podfile, and remove the ones XCode complains about not finding
2. Remove all ‘.xcodeproj’ files that Xcode still complains about as unrecognisable from Libraries (screenshot)
3. Delete node_modules library and re-run npm install (or yarn)
4. pod install && pod update
- [FAIL]
No bundle URL present.
Make sure you're running a packager server or have included a .jsbundle file in your application bundle.
(Taken from this Stack Overflow thread)
- run:
react-native bundle --dev false --platform ios --entry-file index.ios.js --bundle-output ios/main.jsbundle --assets-dest ./ios
- Add main.jsbundle and assets directory to xcode by dragging them in your project.
Done?
If you’re lucky enough you’ll witness this magnificent icon
Hopefully this will help some of you with their struggle!
Good luck and feel free to contact or comment with follow up questions or stuff that didn’t go according to what I wrote
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.