{"id":15645405,"url":"https://github.com/tylergaw/rnupgradepath","last_synced_at":"2026-05-10T09:34:52.802Z","repository":{"id":137993708,"uuid":"157877339","full_name":"tylergaw/RNUpgradePath","owner":"tylergaw","description":"An example repo for getting RN 0.57.x working","archived":false,"fork":false,"pushed_at":"2018-12-11T19:04:57.000Z","size":329,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-28T23:11:11.453Z","etag":null,"topics":["babel7","jest","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tylergaw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-16T14:20:25.000Z","updated_at":"2019-01-14T22:58:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"49bf1bda-e8bd-4e17-aa1c-20332bb990c8","html_url":"https://github.com/tylergaw/RNUpgradePath","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylergaw%2FRNUpgradePath","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylergaw%2FRNUpgradePath/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylergaw%2FRNUpgradePath/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tylergaw%2FRNUpgradePath/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tylergaw","download_url":"https://codeload.github.com/tylergaw/RNUpgradePath/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246254109,"owners_count":20747948,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel7","jest","react-native"],"created_at":"2024-10-03T12:07:13.256Z","updated_at":"2026-05-10T09:34:52.756Z","avatar_url":"https://github.com/tylergaw.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Upgrading or Creating a New React Native Project with 0.57.x [![Build Status](https://travis-ci.com/tylergaw/RNUpgradePath.svg?branch=master)](https://travis-ci.com/tylergaw/RNUpgradePath)\n\n#### Posted 2018-11-16\n#### Updated 2018-11-19\n\nBetween RN 0.54.x and 0.57.x lots of things changed that make the upgrade and even new project creation path a bit rough. I first tried to upgrade a project from 0.54 and hit a wall. Then I tried to create a new project with `react-native init` and hit a few of the same issues. These are steps I took along the path to get a working React Native project using 0.57.5.\n\n*NOTE: The final source code may not exactly match the examples below. I added more as I worked, you should be able to go back through the commits to get to any of the states though.*\n\n### Issues\n1. [Couldn't find preset \"module:metro-react-native-babel-preset\"](#issue-1)\n2. [\"Jest encountered an unexpected token\" (static properties)](#issue-2)\n3. [Unable to resolve module `regenerator-runtime/runtime`](#issue-3)\n4. [Cannot read property 'default' of undefined](#issue-4)\n\n## Steps:\n1. **Update to latest `react-native-cli` globally**\n\n```\n# react-native -v\nreact-native-cli: 2.0.1\nreact-native: 0.57.5\n```\n\n2. **Create a new project**\n\n```\nreact-native init UpgradeTest\n```\n\n3. **Add some \"stuff\"**\n\nIn my original project I hit a wall trying to run tests with Jest. So that's a focus for this upgrade project. I wanted to get similar components in place and be able to test them with `yarn test` or `npm test`. I created one `Button` component that lives in a `components` directory.\n\n![Screenshot of the components directory](https://cl.ly/fdef3bc92e57/Screen%20Shot%202018-11-16%20at%209.08.06%20AM.png)\n\n`Button.js` is a basic `TouchableOpacity` element. With stuff in place, time to test.\n\n```\nyarn test\n```\n\n## Issue 1:\n\n```bash\n# yarn test\nyarn run v1.12.3\n$ jest\n FAIL  components/__tests__/Button.test.js\n  ● Test suite failed to run\n\n    Couldn't find preset \"module:metro-react-native-babel-preset\" relative to directory \"/Users/tyler/Desktop/UpgradeTest\"\n\n      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19\n          at Array.map (\u003canonymous\u003e)\n      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)\n      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)\n      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)\n      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)\n      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)\n      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)\n      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        0.466s\nRan all test suites.\nerror Command failed with exit code 1.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n```\n\nThis seems to be a common problem with both upgrading existing projects and creating new projects.\n\nIn [this Github issue comment](https://github.com/facebook/react-native/issues/21241#issuecomment-431464191) it's suggested we rename `.babelrc` to `babel.config.js`. That worked for me.\n\nWith that I changed, again try to run tests\n\n```\nyarn test\n```\n\n## Issue 2:\n\n```bash\n# yarn test\nyarn run v1.12.3\n$ jest\n FAIL  components/__tests__/Button.test.js\n  ● Test suite failed to run\n\n    /Users/tyler/Desktop/UpgradeTest/node_modules/react-native/jest/mockComponent.js: Unexpected token (20:23)\n\n      Jest encountered an unexpected token\n      This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.\n      By default, if Jest sees a Babel config, it will use that to transform your files, ignoring \"node_modules\".\n      Here's what you can do:\n       • To have some of your \"node_modules\" files transformed, you can specify a custom \"transformIgnorePatterns\" in your config.\n       • If you need a custom transformation specify a \"transform\" option in your config.\n       • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the \"moduleNameMapper\" config option.\n      You'll find more details and examples of these config options in the docs:\n      https://jestjs.io/docs/en/configuration.html\n      Details:\n        18 |\n        19 |   const Component = class extends SuperClass {\n      \u003e 20 |     static displayName = 'Component';\n           |                        ^\n        21 |\n        22 |     render() {\n        23 |       const name =\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        0.429s\nRan all test suites.\nerror Command failed with exit code 1.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n```\n\nThe error message here is not so helpful, but issue seems to be static class properties. This took a good bit of searching to find and it seems like it's pretty widespread. [This comment](https://github.com/facebook/react-native/issues/19859#issuecomment-407748189) has a fix that worked for me.\n\nOn that advice, I added the `transform` key to my `jest` config in `package.json`:\n\n```json\n...\n\"jest\": {\n  \"preset\": \"react-native\",\n  \"transform\": {\n    \"^.+\\\\.js$\": \"\u003crootDir\u003e/node_modules/react-native/jest/preprocessor.js\"\n  }\n}\n...\n```\n\nOnce again `yarn test`. This time all tests pass as expected.\n\n```bash\n# yarn test\nyarn run v1.12.3\n$ jest\n PASS  components/__tests__/Button.test.js\n  Button\n    ✓ renders correctly with props (279ms)\n\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   1 passed, 1 total\nTime:        0.95s, estimated 5s\nRan all test suites.\n✨  Done in 1.65s.\n```\n\n## Issue 3:\n\n**Note**: This didn't happen in this project, but did in another RN project that I was upgrading from RN 0.54.x.\n\nWhen attempting to start the Metro bundler with `yarn start`, I got:\n\n```bash\nError: Unable to resolve module `regenerator-runtime/runtime` from `/Users/gcred/workspace/streetcred/app/node_modules/react-native/Libraries/Core/InitializeCore.js`: Module `regenerator-runtime/runtime` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\n\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules \u0026\u0026 npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\n```\n\nI followed those four steps, but the problem persisted. I took a look in my local `node_modules` folder and noticed there was not a `regenerator-runtime` directory. When running `npm ls` I also noticed a few other warnings about missing peer dependencies. With that, I guessed that my `yarn.lock` and/or `package-lock.json` files were stale, so I:\n\n1. Deleted `yarn.lock` and `package-lock.json`\n2. `rm -rf node_modules`\n3. `yarn \u0026\u0026 npm i`\n\nThat reinstalled the dependencies and regenerated the lock files. After that, `yarn start` works as normal.\n\n## Issue 4:\n\nAny code with class properties–including class methods bound with fat arrows (these get compiled to class props)–will cause Jest tests to fail.\n\nIn the example, I've updated the `App` component to include one of these methods.\n\n```javascript\nclass App extends PureComponent {\n  doWork = () =\u003e {\n    console.log(\"This doesn't do anything. Writing this function to make sure fat arrow class methods work. Narrator: They don't work\");\n  }\n\n  render() {\n    return \u003cHome /\u003e;\n  }\n}\n```\n\nThe app still runs in the simulator but, tests now fail:\n\n```bash\n# yarn test\nyarn run v1.12.3\n$ jest\n FAIL  __tests__/App.test.js\n  ● Console\n\n    console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8060\n      The above error occurred in the \u003cApp\u003e component:\n          in App (at App.test.js:7)\n\n      Consider adding an error boundary to your tree to customize error handling behavior.\n      Visit https://fb.me/react-error-boundaries to learn more about error boundaries.\n\n  ● App › renders correctly\n\n    TypeError: Cannot read property 'default' of undefined\n\n      2 | import { Home } from \"Screens\";\n      3 |\n    \u003e 4 | class App extends PureComponent {\n        |                                                                          ^\n      5 |   doWork = () =\u003e {\n      6 |     console.log(\"This doesn't do anything. Writing this function to make sure fat arrow class methods work.\")\n      7 |   }\n\n      at new App (App.js:4:383)\n      at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4810:18)\n      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6579:5)\n      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7413:16)\n      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10138:12)\n      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10170:24)\n      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10256:7)\n      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11121:7)\n      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11033:7)\n      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11007:3)\n\n PASS  components/Screens/__tests__/Home.test.js\n PASS  components/Patterns/__tests__/Button.test.js\n\nTest Suites: 1 failed, 2 passed, 3 total\nTests:       1 failed, 2 passed, 3 total\nSnapshots:   2 passed, 2 total\nTime:        1.216s\nRan all test suites.\nerror Command failed with exit code 1.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n```\n\nThis seems to be a somewhat common issue, but it took days to track down something that worked for me. In [this comment](https://github.com/facebook/react-native/issues/22175#issuecomment-436959462) the person mentioned they removed `inlineRequires` from the jest preprocessor. That finally fixed this for me and in this example project.\n\nIn this project-and another production project–I make a copy of [the preprocessor](https://github.com/facebook/react-native/blob/master/jest/preprocessor.js) and save it in the root directory as [jest.preprocessor.js](jest.preprocessor.js). Comment out the `inlineRequires: true` option. Then update the `transform` setting in `package.json` to point to the local preprocessor:\n\n```json\n...\n\"transform\": {\n  \"^.+\\\\.js$\": \"\u003crootDir\u003e/jest.preprocessor.js\"\n}\n...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylergaw%2Frnupgradepath","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftylergaw%2Frnupgradepath","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftylergaw%2Frnupgradepath/lists"}