Upgrading React Native from 0.39.0 to 0.42.3 in a hybrid app
At Tido we’re using React Native in a slightly atypical way. It began as a pure iOS app (Swift + Objective-C) and we slowly started embedding React Native components within existing views. As a result, our project structure is non-standard — meaning we don’t have the typical /ios and /android folders, and that some of the automated tooling (eg: react-native-git-upgrade) probably will never work for our project. So we went ahead and upgraded “by hand.”
Fast forward through 4 painful days and we finally succeeded (by 4pm on a Friday!).
Information around this process is scarce, especially for non-standard projects. Many things were tried. We went through every GitHub issue and every StackOverflow question that seemed even remotely relevant. No success. However, we think we managed to boil down the steps needed to upgrade. And we have managed to successfully repeat this process a few times. Hopefully this helps someone, somewhere.
Note: It’s entirely possibly we set things up “weirdly” when we first integrated React Native into the project. Possibly leading to more pain than was necessary. We welcome any comments/suggestions/advice!
1. Clean your node dependencies
We’ve found that rm -rf ./node_modules can solve a lot of problems so we started here.
2. Clean your build folder
Major learning here. Do not, under any circumstance, trust the Xcode cache during the upgrade process. On multiple occasions we thought we got it working, only to clean the build folder and have failures on a subsequent build. The shortcut in Xcode is Option-Shift-Command-K
3. Close Xcode.
Xcode doesn’t seem to behave consistently when reacting to external file changes. So it seemed safer to make changes to files with Xcode closed.
4. Manually edit your node dependencies
We did this manually so that we could create a truly clean node_modules directory. Update your package.json to use react-native@0.42.3
5. Fresh install your node dependencies
npm install
6. Edit Podfile to include dependencies that bridge into native
In the following excerpt from our Podfile, we had to add lines 7, 11, 12, 13:
7. Install your pods
Run pod install. This will install all your pods including pulling the react dependencies from inside the node_module directory structure. You’ll want to commit the files added by this step into your repo.
8. Open Xcode
9. Link the react frameworks to the iOS project
Navigate to the project tree, click on the main project, navigate to the General tab. In here you’ll need to scroll down to the Link Frameworks and Libraries.
In our case, we had to remove some react native related libraries we’d previously added, specifically libRCTAnimations.a, libRCTOrientationListener.a and libRNFetchBlob.a. These may have been put here incorrectly when we first setup RN. We’re not sure.
Now we need to ‘correctly’ link the frameworks for the dependencies we’d added in our Podfile.
In our case, this was React.framework, yoga.framework, react_native_orientation_listener.framework and react_native_fetch_blob.framework.
10. Add React to the build steps in schemes
Open the Product menu, go to Scheme -> Manage Schemes and double click the desired project target.
Select the Build scheme and add React.framework step to the scheme as the first item and uncheck Parallelize builds:
11. Fix local references (ie: convert imports using quotes to use angle brackets).
In our case we needed to make a change in our “bridge” file (ie: where we declare methods that are used to communicate between Native/RN).
We had to change #import "RCTBridgeModule.h" to #import <React/RCTBridgeModule.h>.
After all of this, you should be able to build successfully! If not, we’re very sorry.
Shout out to Anita Czapla and Andy Clarke for persevering through this painful process.
