search

iRoachie / react-native-material-tabs

Material Design implementation of Tabs
MIT License
121 stars 56 forks source link

Unhandled JS Exception: Cannot create styled-component for component: [object Object] #56

Closed ldco2016 closed 5 years ago

ldco2016 commented 5 years ago

I am trying to eliminate a bug that is causing my React Native 0.53.3 application to crash after it opens the splash screen.

Environment:
  OS: macOS High Sierra 10.13.6
  Node: 11.10.1
  Yarn: 1.10.1
  npm: 6.7.0
  Watchman: 4.7.0
  Xcode: Xcode 10.1 Build version 10B61
  Android Studio: 3.4 AI-183.5429.30.34.5452501

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.53.3 => 0.53.3

From the MacOS console I was able to obtain this error message:

Unhandled JS Exception: Cannot create styled-component for component: [object Object]

The only place in this application where styled-component is being utilized is here package-lock.json:

"styled-components": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-2.4.1.tgz",
      "integrity": "sha1-ZjvQSF1LarRvlGIQ3APSOY0a3nQ=",
      "requires": {
        "buffer": "^5.0.3",
        "css-to-react-native": "^2.0.3",
        "fbjs": "^0.8.9",
        "hoist-non-react-statics": "^1.2.0",
        "is-plain-object": "^2.0.1",
        "prop-types": "^15.5.4",
        "stylis": "^3.4.0",
        "supports-color": "^3.2.3"
      },

and here:

"react-native-material-tabs": {
      "version": "3.5.0",
      "resolved": "https://registry.npmjs.org/react-native-material-tabs/-/react-native-material-tabs-3.5.0.tgz",
      "integrity": "sha512-OSni2m2rcxiIYd082fjjroRrU8o/8pZlP3Ok/m244Gl9vUmhyj5WVeTgSYODjmHksQ9IIF2/sZurZcy3DawF7A==",
      "requires": {
        "prop-types": "^15.5.10",
        "styled-components": "^2.3.0"
      }
    },

It seems that it could be a dependency of react-native-material-tabs? That is the only library that is actually being used, specifically, MaterialTabs:

import MaterialTabs from 'react-native-material-tabs';

And implemented here:

render() {
    return (
      <View style={styles.container}>
        {Platform.OS === 'android' && (
          <MaterialTabs
            uppercase={false}
            items={this.props.tabNames}
            selectedIndex={this.state.selectedIndex}
            onChange={this._selectTab}
            barColor={v2Colors.charcoalDark}
            indicatorColor={v2Colors.green}
            activeTextColor={v2Colors.white}
            inactiveTextColor={v2Colors.gray}
            textStyle={{
              fontSize: moderateScale(14, 0.2),
              ...v2Fonts.GothamRegular,
            }}
          />
        )}
        {Platform.OS === 'ios' && (
          <View style={styles.iOSTabsWrapper}>
            {this.props.tabNames.map((tabName, index) => {
              const tabWrapperStyles = [styles.tabWrapper];
              const tabTextStyles = [styles.tabText];
              if (index === 0) {
                tabWrapperStyles.push(styles.tabWrapperFirst);
              } else if (index === this.props.tabNames.length - 1) {
                tabWrapperStyles.push(styles.tabWrapperLast);
              }

The app crashes so there is no console logging I can do as far as I know. I am honestly not sure if I am on the right track. Has anyone had this issue before? Or can you suggest a way to debug if the problem is indeed with the props inside of MaterialTabs being that I don't have access to console due to the app just crashing natively.

You can download a copy of the app here to reproduce: https://www.dropbox.com/s/ygyrhnno8aou4jg/RNsampleApp.zip?dl=0

iRoachie commented 5 years ago

Can you try updating to the latest version(4.0.0) and see if it still errors?

iRoachie commented 5 years ago

Closing as inactive. Feel free to message or create a new issue if this is still a concern.