Nativebase: Upgrade to Babel 7 React Native 0.56 -- Breaking Change

[dharmilsan]

RN v0.56 is going to introduce a breaking change in terms of upgrading to babel7. babel7 is NOT backwards-compatible with babel6 and hence all the plugins will need to be manually updated to import the new babel scoped packages. Read more here: https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#056 and https://babeljs.io/docs/en/next/v7-migration

Given that native-base's dependencies use babel 6 (native-base-shoutem-theme, react-native-vector-icons amongst the ones I've checked), what is the migration plan? I've tried monkey patching both the packages manually but ES6 imports still fail with my config.

[SupriyaKalghatgi]

https://github.com/facebook/react-native/issues/19819

[SupriyaKalghatgi]

@dharmilsan Did you try to run RN app with RN 0.56.0 or 0.56.0-rc.2?

[dharmilsan]

@SupriyaKalghatgi Honestly speaking, I was trying to get this running using react-native-web and Next.js which uses Babel 7 by default. That being said, I can probably try checking if I can build v0.56 today

[SupriyaKalghatgi]

https://github.com/facebook/react-native/issues/19820
https://github.com/facebook/react-native/issues/19789

[jacargentina]

@SupriyaKalghatgi about #2035, ReactNativePropRegistry exists in 0.55.4 but it does not exists in 0.56.0-rc.3

So that should be taken into account here too!

It was removed here https://github.com/facebook/react-native/commit/a8e3c7f5780516eb0297830632862484ad032c10

[ms502040]

Any patch for RN 0.56.0?

if I manual copy old react-native/Libraries/Renderer/shims/ReactNativePropRegistry.js I can run RN app, but it`s dirty workaround.

"@babel/core": "^7.0.0-beta.47",
"native-base": "^2.6.1",
"react": "^16.4.1",
"react-native": "^0.56.0-rc.3",
"babel-jest": "23.0.1",
"babel-plugin-module-resolver": "^3.1.1",
"babel-preset-react-native": "^5.0.2",

[stokesbga]

rn 56 removed everything, just spent the entire day replacing all my @providesModule

IF anyone reading this wants a temporary solution until nativebase moves to babel7 you can use my rn fork of 56rc4 --> https://github.com/stokesbga/react-native

Sorry I can't help with a real PR - Love what you guys are doing!

[fhadsheikh]

Getting the same error:

Error: Unable to resolve module react-native/Libraries/Renderer/shims/ReactNativePropRegistry from /node_modules/native-base/dist/src/Utils/computeProps.js: Module react-native/Libraries/Renderer/shims/ReactNativePropRegistry does not exist in the Haste module map

Is there a plan to fix this?

[elhachimi]

hey! getting the same error as @fhadsheikh after upgrading to RN 0.56.0

adding the file manually seems to fix the issue
https://github.com/facebook/react-native/blob/0.49-stable/Libraries/Renderer/shims/ReactNativePropRegistry.js

[stueynet]

Anyone on Nativebase team seeing this? Can you acknowledge?

[stokesbga]

Im glad people are getting blocked if they're too stupid to read.

Nativebase team is very aware of the issue, considering they have referenced several hundred threads in the react-native repo.

Until they upgrade to babel 7 and make changes to support the removed props shim, you can use my 56rc4 fork that has the file added back https://github.com/stokesbga/react-native

[stueynet]

Im glad people are getting blocked if they're too stupid to read

@stokesbga Too stupid to read what? We saw your fork and thanks for taking the time to do it. I think on our end we would prefer to not adjust react native to make native-base work so we were hoping, as the first post asks, we could see if there is a migration plan for it.

[stueynet]

@stokesbga here is a search of this repo's issues relating to 56. https://github.com/GeekyAnts/NativeBase/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+56

As you can see this is the only thread. I think its more than appropriate to comment right here.

[stokesbga]

The answer to your question is yes. There is a plan for native-base support RN56. If you insist of moving to latest RN version, you have to be patient with third party libs.

[stueynet]

Yeah we have not moved yet. We just started testing 56 and so far this is the only stopper. This issue has been open for a few weeks now with no specific reply so I think people here are just trying to drum up some attention from the team. If they are on it then a simple comment would be all thats required.

[ujwal-setlur]

The contents of said file ReactNativePropRegistry.js is interesting:

/**
 * Copyright (c) 2013-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @providesModule ReactNativePropRegistry
 * @flow
 */

'use strict';

const {
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
} = require('ReactNative');

module.exports =
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactNativePropRegistry;

I don't believe any third party library should be dependent on this. It's been an issue with native-base for a while, unfortunately.

[SupriyaKalghatgi]

We are aware of this, and will fix soon

[SupriyaKalghatgi]

This issue is opened quite days ago, but we cannot start making changes to our package depending on rc release of React Native

[ujwal-setlur]

Completely understand that. I was just questioning the dependency of a third party library like native-base on an internal API.

[redefinered]

I have a project which is due 4 business days from now and I heavily rely on native base. Someone please help? :( Please tell me what RN version is going to work with the latest native base release? Thanks!

[SupriyaKalghatgi]

@redefinered React Native after a gap of 2 months released 0.56 couple of days back. Hope you understand why they took this long to rollout 0.56, same applies to 3rd party libraries
Need to restructure many things, not simple one

I dont think its so very important to move to 0.56 immediately after its release. So RN 0.55.4 and latest NativeBase will work in this case
But if you still want to go with 0.56, then you will have to temporarily add ReactNativePropRegistry, this works with NativeBase

[SupriyaKalghatgi]

https://github.com/facebook/react-native/issues/20015
https://github.com/facebook/react-native/issues/18247

[SupriyaKalghatgi]

Fixed with 2.7.0

[SupriyaKalghatgi]

Keeping this issue open over this weekend
let me know in case of any issues

[SupriyaKalghatgi]

Upgraded NativeBase KitchenSink

[ujwal-setlur]

@SupriyaKalghatgi, thanks! Very prompt!

Is this still backwards compatible with react-native < 0.56.0? Some of other libraries that I use have issues as well so I need to wait 😄

[SupriyaKalghatgi]

@ujwal-setlur This is mentioned in release notes
You can also find this information with ReadMe

[SupriyaKalghatgi]

I tried these

    "native-base": "2.7.0",
    "react": "16.3.1",
    "react-native": "0.55.4",

worked fine @ujwal-setlur

[ujwal-setlur]

Thanks!

[stueynet]

Thanks you so much @SupriyaKalghatgi! I think everyone here appreciates the work to get this updated!

[stokesbga]

Thank you guys. Not the useless morons, but the native-base team

[stueynet]

Thank you guys. Not the useless morons, but the native-base team

@stokesbga for posterity

[redefinered]

@SupriyaKalghatgi I tried

   "native-base": "2.7.0",
    "react": "16.3.1",
    "react-native": "0.55.4",

I get this error:

[JonathanGuo]

@redefinered Have you upgraded your babel-preset-react-native?

Try upgrade it in your package.json.

"babel-preset-react-native": "^5.0.2",

[SupriyaKalghatgi]

@redefinered The screenshot says error is due to babel-preset-react-native, then you must share this too along with NativeBase, React and React Native versions

[SupriyaKalghatgi]

Closing this today

[rfviolato]

I can confirm that the issue is gone and everything is working. Thanks! :)

"native-base": "^2.7.0",
"react": "16.4.1",
"react-native": "0.56.0",
"babel-preset-react-native": "^5",

[bonlemuel]

@redefinered were you able to solve the issue?

[duranmla]

Whereas the application is running nobody is getting errors when trying to run a jest test that uses native-base? for my case I check the issues:

• https://github.com/facebook/react-native/issues/19859
• https://github.com/facebook/react-native/pull/20068

Besides, there is a great comment at: https://github.com/facebook/react-native/issues/19859#issuecomment-407748189

While it solves my issue to run jest it doesn't allow me to solve the issue to run the tests once I add native-base to my project.

My package.json file can be found at: https://gist.github.com/duranmla/d0e06870f39d2452867d4cbde1629531

An overview to the error:

Test suite failed to run

    /Users/Alexis/Projects/client/handypass/node_modules/native-base-shoutem-theme/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import connectStyle from "./src/connectStyle";

Looks pretty much as there is something wrong when the code is being read for jest (or something like that). In any case, thanks for the work at native-base, if someone face the same issue or knows the solution please comment below.

Cheers! 🍻

[duranmla]

Basically, I use the same approach as https://github.com/GeekyAnts/NativeBase/issues/396#issuecomment-270116326 and now it works as expected.

[haotangio]

Problem reoccur on RN 0.57 & "native-base": "^2.8.1"

[haotangio]

Problem reoccur on RN 0.57 & "native-base": "^2.8.1"

Fixed with last effort of adding the file manually seems to fix the issue
https://github.com/facebook/react-native/blob/0.49-stable/Libraries/Renderer/shims/ReactNativePropRegistry.js

[SupriyaKalghatgi]

All fine with React Native 0.57 and NativeBase 2.8.1

[pabloLarios24]

Module react-native/Libraries/Renderer/shims/ReactNativeBridgeEventPlugin does not exist in the Haste module map, how fix it?

[SEWilco]

I've spent several days fighting dependencies, and now find that my fresh install can't handle my app's code because the development platform broke itself? Ick.

[SEWilco]

I've spent several days fighting dependencies, and now find that my fresh install can't handle my app's code because the development platform broke itself? Ick.

Hey, is there a link in here to where all the similar breaking items are listed? I need to know what else has been broken in the past year.

[melkishengue]

I am also facing the same issue with the following configuration:

```"@babel/core": "^7.1.0",
"@ptomasroos/react-native-multi-slider": "^0.0.12",
"apisauce": "^0.14.3",
"babel-core": "7.0.0-bridge.0",
"eslint": "^4.15.0",
"metro-react-native-babel-preset": "^0.51.1",
"moment": "^2.21.0",
"native-base": "^2.7.0",
"prop-types": "^15.6.0",
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-autolink": "^1.4.0",
"react-native-collapsible": "^0.10.0",
"react-native-config": "^0.11.5",
"react-native-easy-grid": "^0.1.17",
"react-native-fast-image": "4.0.14",
"react-native-i18n": "^2.0.10",
"react-native-maps": "^0.21.0",
"react-native-modal": "^5.3.0",
"react-native-render-html": "^3.9.0",
"react-native-router-flux": "^4.0.0-beta.28",
"react-native-splash-screen": "^3.0.6",
"react-native-swiper": "^1.5.13",
"react-native-timer": "^1.3.1",
"react-native-vector-icons": "^4.5.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"

.babelrc:

{
"presets": ["react-native"]
}

The error trace:

error: bundling failed: Error: Unable to resolve module react-native/Libraries/Renderer/shims/ReactNativePropRegistry from /node_modules/react-native-easy-grid/Utils/computeProps.js: Module react-native/Libraries/Renderer/shims/ReactNativePropRegistry does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:

1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache. 4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.
   ```

[radjivF]

I have following all the steps in this issue but I still have it the error.

 "babel-preset-react-native": "^5.0.2",
    "react-test-renderer": "16.4.1",
    "native-base": "^2.7.0",
    "react": "16.4.1",
    "react-native": "0.56.1",

I'm on my way to upgrade my app 0.55.4 to 0.56.1 and I would love to compile it before I increase my RN version again

Anyone can help? @melkishengue @SupriyaKalghatgi