React Native - Upgrading


react-native-git-upgrade

  1. https://facebook.github.io/react-native/docs/upgrading.html
  2. https://medium.zenika.com/easier-react-native-upgrades-with-rn-diff-5020b5c3de2d
  3. https://github.com/facebook/react-native/issues/12261#issuecomment-284047679
  4. https://github.com/facebook/react-native/issues/12261#issuecomment-286355163

see npm/Yarn - Tips for npm_reset.

set merge strategy for project.pbxproj file

  1. https://github.com/facebook/react-native/issues/12261#issuecomment-341510929
  2. http://roadfiresoftware.com/2015/09/automatically-resolving-git-merge-conflicts-in-xcodes-project-pbxproj/

using union merge strategy for project.pbxproj instructs Git to use both sides (ours and theirs) during a merge.

.gitattributes:

*.pbxproj -text merge=union

upgrade with react-native-git-upgrade

  1. https://facebook.github.io/react-native/docs/upgrading.html#upgrade-based-on-git
  2. https://facebook.github.io/react-native/blog/2016/12/05/easier-upgrades.html
$ npm install -g react-native-git-upgrade
$ react-native-git-upgrade

resolve conflicts

resolve conflicts in all modified by react-native-git-upgrade files except for project.pbxproj - all conflicts should be merged automatically for this file because of union merge strategy set in .gitattributes previously.

enable gitgutter in MacVim and resolve conflicts in modified files manually one by one (search for ours/theirs conflict markers).

verify and fix project.pbxproj file

  1. https://github.com/Karumi/Kin

check project.pbxproj with Kin:

$ pip2 install kin
$ kin ios/iceperkapp.xcodeproj/project.pbxproj

NOTE: install Kin with pip2 - not pip3.

if Python interpreter is not found - reinstall kin:

$ pip2 uninstall kin
$ pip2 install kin
$ react-native link

NOTE: this command didn’t link all packages when upgrading to RN 0.52.1 - still it might be necessary to link some packages manually.

repair CocoaPods

see the tip from React Native - iOS.

post-upgrade instructions

$ npm_reset
$ react-native run-ios
$ react-native run-android

NOTE: don’t forget to rebuild both iOS and Android applications!

UPDATE

  1. React Native - Troubleshooting

after fixing different issues related to RN upgrade some libraries turned out to be not linked - link all libraries again (just in case):

$ react-native link

even after running this command I had to link a lot of libraries manually (see the linked post) - it looks like react-native link command is somehow broken in RN 0.52.1.

rn-diff-purge

  1. https://facebook.github.io/react-native/docs/upgrading.html#alternative

I tried to upgrade RN from 0.52.1 to 0.59.9 with rn-diff-purge.

https://github.com/react-native-community/rn-diff-purge/

Why this repository?

react-native-git-upgrade is painful. A simple diff by recreating the project is a much much simpler way to get a diff on every new React Native release.

UPDATE (2019-08-09)

  1. https://github.com/react-native-community/upgrade-helper
  2. https://facebook.github.io/react-native/blog/2019/07/03/version-60#upgrade-helper

use Upgrade Helper instead - it’s a convenient web tool that works on top of rn-diff-purge (and provides some extra features).

upgrade react and react-native dependencies

$ rm -rf node_modules
$ npm install --save react-native@0.59.9
...
npm WARN react-native@0.59.9 requires a peer of react@16.8.3 but none is installed. You must install peer dependencies yourself.
$ npm install --save react@16.8.3

apply changes from diff by rn-diff-purge

  1. https://github.com/react-native-community/rn-diff-purge/blob/master/USAGE.md#recommended-method
  2. https://github.com/react-native-community/rn-diff-purge/compare/release%2F0.52.1..release%2F0.59.9?diff=unified

I did it manually - even for big files like project.pbxproj.

tips:

repair CocoaPods

  1. React Native - iOS

configure CocoaPods dependencies

  1. React Native - iOS

try to build and start your application

$ npm install
$ react-native start
$ react-native run-android
$ react-native run-ios

most likely there will be lots of errors: many npm packages got broken because of new versions of RN, Babel, Gradle, whatever.

regenerate ios/ and android/ folders

  1. https://stackoverflow.com/a/42507293/3632318

I haven’t tried it by myself but the idea to recreate both iOS and Android applications from scratch seems no-nonsense - especially when you’ve got to upgrade between multiple major versions and it turns into a nightmare.

NOTE: the App Store and the Google Play Store shouldn’t notice these are new applications so make sure to use the same identifiers and certificates.