NativeBase Native-Base 2.15.2 incompatible with React-Native 0.69

Native-Base 2.15.2 incompatible with React-Native 0.69

Open Relax594 opened this issue 1 year ago • 13 comments

Description

After updating React-Native from 0.68 to 0.69 app is not building anymore.

Error: Requiring module "node_modules\native-base\dist\src\index.js", which threw an exception: Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'

Also this error pops up in console when trying to build: TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[14], "native-base").Item')

CodeSandbox/Snack link

not needed

Steps to reproduce

Upgrade React-Native from 0.68 to 0.69

NativeBase Version

2.15.2

Platform

[X] Android
[ ] CRA
[ ] Expo
[X] iOS
[ ] Next

Other Platform

No response

Additional Information

No response

Sep 14 '22 10:09 Relax594

Hey @Relax594, Thanks for reporting the issue. We'll look into it.

Sep 15 '22 10:09 ankit-tailor

Same thing here. I'm on my way to prepare a PR for that.

Sep 15 '22 12:09 inspmoore

Same here, last EXPO sdk.

Sep 16 '22 11:09 wennaspeedy

ah, this has been driving me crazy. Glad you have identified it, it's been a blocker for my team for more than a week now and we really need to release it with the latest EXPO sdk.

Very grateful for a speed resolution. Thanks

Sep 22 '22 09:09 knottronix

I already updated my app to native-base v3. Much faster than waiting for new version v2.

Sep 23 '22 18:09 wennaspeedy

I already updated my app to native-base v3. Much faster than waiting for new version v2.

I don't get the migration "guide" or anything. The documentation on what has changed and how to migrate just isn't there and you can't just upgrade without destroying every bit of UI in basically any app we provide.

Therefore we stay with v2 as long as they at least merge pull requests with fixes from the community.

Sep 23 '22 18:09 Relax594

https://github.com/facebook/react-native/issues/33734#issuecomment-1211119020. this solution worked for me.

Copied from comment above:

Created a file rn-polyfill-depricated-proptypes.js, and imported at top of index.js. Solved the issue for me

you may also change the get function to return from deprecated-react-native-prop-types

/** *File: rn-polyfill-depricated-proptypes.js **/ const reactnative = require('react-native');

Object.defineProperty(reactnative, 'ColorPropType', { configurable: true, get() { return {}; }, });

Object.defineProperty(reactnative, 'EdgeInsetsPropType', { configurable: true, get() { return {}; }, });

Object.defineProperty(reactnative, 'PointPropType', { configurable: true, get() { return {}; }, });

Object.defineProperty(reactnative, 'ViewPropTypes', { configurable: true, get() { return {}; }, });

Oct 22 '22 16:10 wardjk87

I put the polyfill in, and it's compiling and running, but on Android:

many <Icon>s are not showing properly (or at all)
<CheckBox> control shows something like a dash in the box rather than a tick

EDIT: I eventually got round these issues by copying the fonts again from node_modules/react-native-vector-icons/Fonts to android/app/src/main/assets/fonts.

Oct 31 '22 21:10 JeremyBradshaw7

Same here! Any updates on this issue?

Jan 11 '23 08:01 maaliHasan

facebook/react-native#33734 (comment). this solution worked for me.

Copied from comment above:

Created a file rn-polyfill-depricated-proptypes.js, and imported at top of index.js. Solved the issue for me

you may also change the get function to return from deprecated-react-native-prop-types

/** *File: rn-polyfill-depricated-proptypes.js **/ const reactnative = require('react-native');

Object.defineProperty(reactnative, 'ColorPropType', { configurable: true, get() { return {}; }, });

Object.defineProperty(reactnative, 'EdgeInsetsPropType', { configurable: true, get() { return {}; }, });

Object.defineProperty(reactnative, 'PointPropType', { configurable: true, get() { return {}; }, });

Object.defineProperty(reactnative, 'ViewPropTypes', { configurable: true, get() { return {}; }, });

Thank you this solved my issue!