5 steps to upgrade React Native project to 0.56

Admin
React Paths
Published in
2 min readJul 11, 2018
“Upgrade”

The current release of React Native is a biggish change. It now targets Android version 26 as per the requirements for google play store along with Node 8, iOS 9 the oldest iOS version etc.

There is an official way but steps below work cleaner for me.

UPDATE : WARNING WINDOWS 10 USERS

It looks like there is issue in metro on windows 10. I don’t have a windows machine to check so please follow this issue https://github.com/facebook/react-native/issues/2005 and read this comment https://github.com/facebook/react-native/issues/20015#issuecomment-404128356 . This looks fixed now.
Another Issue https://github.com/facebook/react-native/issues/19953 “Unable to resolve module AccessibilityInfo
I will keep this notice till issues are resolved.

The Clean Way

  1. Delete the android & ios directories
  2. Edit the package.json file and update the highlighted lines ‘react-native’ and ‘babel-preset-react-native
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.3.1",
"react-native": "^0.56.0",
"react-native-firebase": "^4.3.0"
},
"devDependencies": {
"babel-jest": "23.2.0",
"babel-preset-react-native": "^5.0.2",
"jest": "23.2.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}

3. Run npm install or yarn to update the packages

For Android you have to make changes in AndroidStudio to target Android 26

4 (a). Start AndroidStudio > select Preferences > select ‘SDK Tools’ tab > check Android SDK Tools version 26.x.x > click Apply

4 (b). Next select ‘SDK Platforms’ tab > open Android 8.0 (Oreo) > check the Highlighted option > click Apply

5. Finally Run react-native upgrade to re-create the android & iOS directories again with new updated sdks

And you are now ready to compile again.

P.S. If you get this error “Metro bundler has encountered an internal error” then just close Metro Bundler terminal window and re-run again.

--

--

React Paths
React Paths

Published in React Paths

Blog for all things React from flocks at https://secureend.com. Contact us for react work

Admin
Admin

Written by Admin

A Full Stack Developer - React, ReactNative, Node, Php @ https://secureend.com consulting.