tabStyle: ViewPropTypes.style undefined on latest version of expo

[GeorgeBellTMH]

Getting the following after upgrading to latest version of expo...

TypeError: Cannot read property 'style' of undefined
~/node_modules/native-base/dist/src/basic/Tabs/DefaultTabBar.js
C:/Users/src/basic/Tabs/DefaultTabBar.js:26
23 | activeTextColor: PropTypes.string,
24 | inactiveTextColor: PropTypes.string,
25 | disabledTextColor: PropTypes.string,

26 | tabStyle: ViewPropTypes.style,
| ^ 27 | renderTab: PropTypes.func,
28 | underlineStyle: ViewPropTypes.style,
29 | tabContainerStyle: ViewPropTypes.style,

[NishargShah]

Yes, solve this error ASAP ;_;

[hanykumar]

Hi @GeorgeBellTMH , Is the bug present in web, iOS or Android?

[GeorgeBellTMH]

web

[hanykumar]

This is a known issue and we are working on it.

[matias91]

Hi, @hanykumar!

I found the same issue in a different repo (react-native-web-swiper), and they solved it replacing:

ViewPropTypes.style

with:

PropTypes.shape({
  style: PropTypes.any,
}),

I tested this change locally and it seems to work with this repo too.
I had to do this change in DefaultTabBar.js, ScrollableTabBar.js and Tabs/index.js.
Those files are already importing PropTypes and using it, so looks like a suitable solution.

I can create a PR if you think this is okay. Or if the team is working in a different solution I'll just wait.

Thanks for your work and your time!

[pratikthakkar]

any updates here ?

[prasadsrg]

In Web still facing same problem, just import the native-base we are getting this issue, which is blocker for us.

TypeError: Cannot read property 'style' of undefined
../../../native-base/dist/src/basic/Tabs/DefaultTabBar.js
src/basic/Tabs/DefaultTabBar.js:26
 23 | activeTextColor: PropTypes.string,
 24 | inactiveTextColor: PropTypes.string,
 25 | disabledTextColor: PropTypes.string,
**> 26 | tabStyle: ViewPropTypes.style,**
    **| ^  27 | renderTab: PropTypes.func,**
 28 | underlineStyle: ViewPropTypes.style,
 29 | tabContainerStyle: ViewPropTypes.style,
View compiled
__webpack_require__
/Volumes/work/projects/test/native-base-app/webpack/bootstrap:789
 786 | };
 787 | 
 788 | // Execute the module function
> 789 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
     | ^  790 | 
 791 | // Flag the module as loaded
 792 | module.l = true;

[cspecter]

Is this PR going to every be integrated? We got it working by installing this specific PR, but there are other bugs we are running in to that have been fixed in the main branch.

[richagain]

Hi, @hanykumar!

I found the same issue in a different repo (react-native-web-swiper), and they solved it replacing:

ViewPropTypes.style

with:

PropTypes.shape({
  style: PropTypes.any,
}),

I tested this change locally and it seems to work with this repo too.
I had to do this change in DefaultTabBar.js, ScrollableTabBar.js and Tabs/index.js.
Those files are already importing PropTypes and using it, so looks like a suitable solution.

I can create a PR if you think this is okay. Or if the team is working in a different solution I'll just wait.

Thanks for your work and your time!

I tried your solution but it didn't work.

[gajendrapratap]

can any one tell how i can solve below error:

TypeError: Cannot read property 'style' of undefined
Module.../../../react-native-looped-carousel/index.js
../node_modules/react-native-looped-carousel/index.js:38

[prasadsrg]

this is error is from long back, there are not care about it. I moved to UI Kitten 5.0

[i6mi6]

I solved it by going into

node_modules/native-base/dist/src/utils/index.js

then replacing exports.ViewPropTypes=_reactNative.ViewPropTypes;

with

var PropTypes=require('prop-types');exports.ViewPropTypes=PropTypes.shape({ style: PropTypes.any });

Then patching it by calling npx patch-package native-base

[embray]

This looks like a duplicate of #3130. It was fixed in native-base as of 2.15.2 (I had the same problem and confirmed that updating fixed it). So this issue can be closed.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[frknltrk]

Hi, @hanykumar!

I found the same issue in a different repo (react-native-web-swiper), and they solved it replacing:

ViewPropTypes.style

with:

PropTypes.shape({
  style: PropTypes.any,
}),

I tested this change locally and it seems to work with this repo too. I had to do this change in DefaultTabBar.js, ScrollableTabBar.js and Tabs/index.js. Those files are already importing PropTypes and using it, so looks like a suitable solution.

I can create a PR if you think this is okay. Or if the team is working in a different solution I'll just wait.

Thanks for your work and your time!

now a better fix (replacement) is available: PropTypes.style instead of just ViewPropTypes.style