React native upgrade from babel 6 to babel 7

Short answer:

run npx babel-upgrade

(then you can take a look in package.json to check what changed)

Long answer:

For RN 0.57.x after reading the babel and babel-upgrade docs I realized it was enough to have all the old babel dependencies inside devDependencies for my project:

"dependencies": {
    .........
    "react": "16.3.1",
    "react-native": "0.55.4",
 },

"devDependencies": {
   "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "react-native": "0.55.4",
    "babel-eslint": "^8.2.2",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",        
    .....
  },

1) I used npx and babel-upgrade (npx is already included in npm versions >= 5.2.0) If you have older npm versions you have to install npx globally.

npx lets you run babel-upgrade without installing it locally.

2) I ran npx babel-upgrade ( without the --write option) to see how the upgrade will affect my package.json deps)

3) I ran npx babel-upgrade --write

4) I set RN version to 0.57.1 and changed the babel-preset dependency from "babel-preset-react-native": "^5", to "metro-react-native-babel-preset": "^0.45.0",and .babelrc configuration to:

{
    "presets": ["module:metro-react-native-babel-preset"]
}

as written in the RN change log instructions.

Now package.json looks like this:

  "dependencies": {
    "react": "16.5.0",
    "react-native": "0.57.1",
    .......
  }

  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-do-expressions": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    .....

}

I am not sure if all the new dependencies added by gradle-upgrade are needed but the project builds and runs ok for both android and ios.

If you find a better solution or improvements for this babel update please add a comment or add a new answer, I will be happy to update my answer or accept a new better one.

Sources:

https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#057

https://github.com/babel/babel-upgrade

For RN 0.58.6 I noticed I do not need so many babel deps. I noticed this creating a new project with a react-native init command.

My package.json file looks now like this:

{
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.6",
    // ....

  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.53.0",
    "react-test-renderer": "16.6.3",
    // .... 

  },
  "jest": {
    "preset": "react-native", 
   // ...
  }

}

NOTE: For IOS: I was able to build it in IOS without any react/react-native deps in pod file. I added/re-added those inside Linked Frameworks and Libraries section

Use babel-upgrade.

You can try using babel-upgrade in order to automatically upgrade your Babel dependencies.

It's very easy to use, even without installing it globally.

I recommend having a clean working directory (no unstaged changes) and simply run the following command:

npx babel-upgrade --write

This will update your package.json and your .babelrc files with the correct Babel versions and packages.

The --write command just tells the tool to save the changes to disk. That's why I suggested having a clean working directory so you can review the changes with git diff. If you omit --write it will just show the desired changes in the console.

You can see more information at https://github.com/babel/babel-upgrade.