Tips for upgrading React Native (especially >0.45)

UPGRADING.md

Here are a few tips if you have trouble upgrading versions of React Native.

Upgrading dependencies for React 16 ([email protected] and above)

[email protected] uses React 16, while previous versions use React 15. Be aware that React 16 is still in Alpha, so unless you need features in React Native 0.45 or above, consider sticking to v0.44 for now.

If you upgrade, several dependencies need to be updated manually:

• react should be on 16.0.0-alpha.12
• react-native-cli should be on 2.0.1
• babel-preset-react-native should be at least on 1.9.0
• enzyme has a 3.0 alpha enzyme@alpha out now if you write tests for components.
• react-router supports React 16 from 4.1.0 on if you use it. (Also remember react-router-native / react-router-web which also need upgrades!)
• react-redux has a v5 out which removes some warnings you encounter with React 16.
• react-test-renderer has an 16.0.0-alpha.12 out as well
• react-navigation has 1.0.0-beta.11 out (beware breaking changes!)
• babel-preset-react-native could be outdated also, make sure you are using the latest version

If you share code between native and web, you probably also need to update the dependencies for web as you cannot have two versions of React:

• react-dom should be on 16.0.0-alpha.12 if you also render websites in the same project
• [email protected], react-helmet@5 are some other libraries that I had to upgrade to.

Get rid of deprecation warnings

One big change in React 16 is that PropTypes and React.createClass have been moved to separate packages. You need to refactor your code if you require these features from the React package.

Most likely a dependency that you use still throws a deprecation warning and you cannot fix that directly. What I do in this case is to use the debugger in the remote dev tools to set a breakpoint at the point where a deprecation warning is shown to figure out which package calls the deprecated methods. Then I clone the Github repo of that module, refactor the code to use the prop-types and react-create-class packages instead, and npm publish the packages to my own npm scope (like @jonny/react-native-mock). Also make a PR to the project if possible to add React 16 support!

General Tips

Objective-C build errors after upgrading

When running the app, Xcode compiles code in node_modules/react to a binary. After upgrading, these binaries need to be recompiled but are most likely cached. With a clean Product -> Clean... (⌘ + Shift + K) the cache can be cleared.

Sometimes Xcode tries to compile other binaries that depend on React (say libRCTImage.a) before React itself gets recompiled. In that case you can try two things:

• Under 'Edit Scheme... -> Build Options -> Parallelize Build' you can disable parallelization to prevent the compiling of binaries that depend on React to compile before React itself gets compiled.
• In the project under 'General -> Linked Frameworks and Libraries' make sure that all frameworks you need are added and that libReact.a is at the top to make sure it gets compiled first.

Try resetting the cache

This script called reset_everything.sh tries to reset as much as possible and restart the server:

rm -rf ~/Library/Developer/Xcode/DerivedData
watchman watch-del-all
rm -rf $TMPDIR/react-*
rm -rf node_modules
yarn # or npm install
npm start -- --reset-cache

Fixing Babel transform errors

In previous versions of React Native, you had to use a different Babel preset to get all experimental language features. Therefore you might have changed the preset in .babelrc to get more language features. This is probably not needed anymore – make sure you update babel-preset-react-native and that you use only this preset.

What are some other upgrade difficulties you had?

... and how did you fix the issue? Let me know and I will add it to this guide also.