Updating React, React Native & React Native Navigation

[jakewtaylor]

Hi all,

Apologies if there's another issue about this kind of thing already, but I had a quick look and couldn't find anything.

I'm currently using this library in a project, but the React/React Native versions have fallen a bit behind. Currently on:

Package	Version	Latest
react	16.0.0-alpha.12	16.2.0
react-native	0.47.2	0.51
react-native-navigation	1.1.205	1.1.334

Obviously, the react-native-navigation update shouldn't be too complicated as only patches have been released, but my concern is with react and react-native themselves.

The docs suggest using react-native-git-upgrade, but as we have to fundamentally change source files (AppDelegate.m and MainActivity.java/MainApplication.java), I'm concerned this won't work, or worse, will break my project.

Will I be safe trying to use react-native-git-upgrade, or should I use the alternative method given in the docs?

This concern applies to using the CLI command react-native link as well, which I've stayed clear of recently, having to painstakingly try and work out how on earth XCode works. 😆

Hopefully, I'm not being overly paranoid about ruining my project, but I'm not big on the native side of things, so I'm just uncertain.

Thanks for any help. 😄

[bbar]

If you're comfortable with basic git commands, awesome. If not, it's definitely worth an hour or so of your time to learn your way around. (All you'll need to know is how to create branches, checkout branches, commit changes and merge branches.) Once you know that, just create a new branch, and apply the upgrade. If it doesn't work, no big deal.

That being said, react-native-navigation seems to be having trouble with RN 0.52.0 on Android. That's been reported here. So if you need Android support, I'd hold off until that's resolved.

This is kinda out of the scope of the question, but to get you pointed in the right direction, an upgrade would look something like this:

Install react-native-git-upgrade:
$ npm install -g react-native-git-upgrade

Go to your app directory:
$ cd your/app/directory

Create a new branch called rn-upgrade (let's assume you're doing this from your master branch):
$ git checkout -b rn-upgrade

Run the upgrade:
$ react-native-git-upgrade

Now the "fun" part — reconcile any changes. Let's see what changed...
$ git status

Open the changed files in an editor of your choice and decide what to keep and what to discard. To see where FB made changes, just search for something like '===='. When you're done with a block, all the <<< ours ==== theirs >>> should be gone (otherwise you'll get parsing errors when you build the project).

13B07F951A680F5B00A75B9A /* Release */ = {
  isa = XCBuildConfiguration;
  buildSettings = {
    ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
    CODE_SIGN_IDENTITY = "iPhone Developer";
    FRAMEWORK_SEARCH_PATHS = (
      "$(inherited)",
      "$(PROJECT_DIR)/HockeySDK.embeddedframework",
      "$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
    );
=======
    CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
    HEADER_SEARCH_PATHS = (
      "$(inherited)",
      /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
      "$(SRCROOT)/../node_modules/react-native/React/**",
      "$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
    );

Once you're done with that, try to run your app(s):

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

IF everything works, it's time to commit + merge the rn-upgrade branch with your master branch:

$ git add -A
$ git commit -m "upgrade went well"
$ git checkout master
$ git merge rn-upgrade
$ git branch -d rn-upgrade

BUT, what if the worst happens and nothing's working? Just "undo" everything:

$ git stash
$ git stash drop
$ git clean -fdx
$ git branch -d rn-upgrade

Also, if you're excluding your node_modules dir from git, you'll want to reinstall your dependencies in your master branch:

$ git checkout master
$ rm -rf node_modules
$ yarn cache clean
$ yarn install

Hopefully this helps not only with this upgrade, but future upgrades as well. Good luck!

[jakewtaylor]

Thanks for the detailed response.

I've switched to a new branch and tried to upgrade. There were a lot of conflicts in my ios/{ProjectName}.xcodeproj/project.pbxproj which are completely unreadable to me, I have no idea if I've got them right, but there didn't appear to be any actual conflicts, just my linked libraries and new linked libraries.

My biggest concern is the "conflict" in MainApplication.java. The 'ours' section is completely empty, but a few new methods in the 'theirs' section.

Can I safely just ensure my MainApplication.java matches the installation instructions for react-native-navigation and then continue?

File is here

[bbar]

Yeah, I'd just follow the setup instructions of react-native-navigation and remove the stuff FB added (aka "theirs"). Your new MainApplication file should look like this: MainApplication.java

Here were my outcomes with RN 0.51 & 0.52...

React Native 0.51
Android: Everything builds and runs fine
iOS: Everything builds fine, but some some strange warnings were being thrown (may not be related to react-native-navigation)

React Native 0.52
Android: fails to build
iOS: Everything builds and runs fine

Once the issue I mentioned above has been resolved, react-native-navigation should play nicely with 0.52 on both platforms.

So if you didn't specify version 0.51 when upgrading with react-native-git-upgrade 0.51, I don't think you're going to have much luck getting Android to build.

[jakewtaylor]

Yep, I had seen that 0.52 wasn't working at the moment, so only used 0.51.

I struggled to get upgrading to work, so decided to create a new project with the new versions, move in all my source JS files, and then run through and install all dependencies that were required.

Maybe not the best way of upgrading, but at least it actually works. I'll leave this open because I feel this isn't exactly solved, a better way to do this would be nice.

[pqkluan]

It looks like OP accepts the answers above and this kind of topic is more suitable for StackOverflow. Feel free to re-open if needed.

[MrLoh]

My experience is that it usually works to just ignore all changes that react-native-git-upgrade creates in project.pbxproj, I'd advise to always try that first.