ui icon indicating copy to clipboard operation
ui copied to clipboard
verified publisher icon shoutem

undefined is not an object (evaluating 'this.props.statusBarColor')

Open kiwicopple opened this issue 7 years ago • 14 comments

Hey team, I'm currently getting an error on both iOS/Android, when using NavigationBar

The error is:

TypeError: TypeError: TypeError: TypeError: TypeError: undefined is not an object (evaluating 'this.props.statusBarColor')

The error goes away if I comment out the NavigationBar

The only reference on the internet I could find was this comment.

Any pointers would be much appreciated.

kiwicopple avatar Nov 01 '18 03:11 kiwicopple

I have the same problem on android

lepresk avatar Nov 06 '18 09:11 lepresk

same here

corelmax avatar Nov 06 '18 14:11 corelmax

We have the same problem...

jjgumucio avatar Nov 07 '18 18:11 jjgumucio

Ok so I think I found the problem after taking a peak into the NavigationBar component.

First Error:

This function was causing the initial error as the line: const { statusBarColor } = this.props this.props turned to be undefined. I modified it and the function ends like this.

  function setStatusBarStyle(backgroundColor) {
    function chooseBarStyle(bgColor) {
      return color(bgColor).isDark() ? 'light-content' : 'default';
    }

    function setStyle(bgColor) {
      const { statusBarColor } = this.props ? this.props : { statusBarColor: bgColor };

      const color = statusBarColor

      if (Platform.OS === 'android') {
        StatusBar.setBackgroundColor('rgba(0, 0, 0, 0.2)');
      } else {
        const barStyle = chooseBarStyle(color);
        StatusBar.setBarStyle(barStyle);
      } 
    }

    // This is little bit hacky, but is the only way
    // to determine the current value of interpolated Animated.Value
    // Other way would be to ask developer to provide Animated.Value
    // used to interpolate backgroundColor. But this way developer doesn't
    // have to concern about status bar if he animates navigation bar color
    if (backgroundColor && backgroundColor._parent instanceof Animated.Value) {
      backgroundColor._parent.addListener((animation) => {
        setStyle(backgroundColor._interpolation(animation.value));
      });
      setStyle(backgroundColor._interpolation(0));
    } else {
      setStyle(backgroundColor);
    }
  }

That fix showed another problem:

Second Error:

The component, at the return statement from the render method, calls a function called renderStatusBar. This function is in charge of detecting if the device is an iPhoneX or not. If it is, it renders special styles:

  renderStatusBar() {
    const { style } = this.props;

    return Device.select({
      iPhoneX: (<View style={style.statusBar} />),
      default: null,
    });
  }

The problem here is that Device is not imported from anywhere nor defined. I deleted the call to this function at the render method and everything works fine.

It is very hacky way to solve it and we are loosing the ability to detect iPhoneX devices. Must be very easy to solve. P.D: I looked for the Device class/component on the React-Native docs but couldn't find it.

jjgumucio avatar Nov 08 '18 15:11 jjgumucio

@jjgumucio Device comes from @shoutem/ui/helpers/device-selector.js

florian-usports avatar Nov 10 '18 10:11 florian-usports

having the same issue, any fix/workaround for now?

yapjinkun avatar Nov 11 '18 16:11 yapjinkun

I didn't end up finding a fix. Luckily I had a branch where I wasn't encountering the error - I copied my package-lock.json file over and then the error went away, so I'm guessing it's caused by a new version of one of the dependencies.

Not sure if this will help, but here is the "shoutem" block from my package-lock.json file:

    "@shoutem/animation": {
      "version": "0.12.2",
      "resolved": "https://registry.npmjs.org/@shoutem/animation/-/animation-0.12.2.tgz",
      "integrity": "sha1-6mSz2YLzp2553HNtpvRaV3LLpKg=",
      "requires": {
        "hoist-non-react-statics": "1.2.0",
        "lodash": "4.17.10"
      },
      "dependencies": {
        "hoist-non-react-statics": {
          "version": "1.2.0",
          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
          "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
        }
      }
    },
    "@shoutem/theme": {
      "version": "0.11.1",
      "resolved": "https://registry.npmjs.org/@shoutem/theme/-/theme-0.11.1.tgz",
      "integrity": "sha1-57PSG+b0zdfpjSrcNUdVxTLrcZ0=",
      "requires": {
        "hoist-non-react-statics": "1.2.0",
        "lodash": "4.17.10",
        "prop-types": "15.6.2",
        "tinycolor2": "1.3.0"
      },
      "dependencies": {
        "hoist-non-react-statics": {
          "version": "1.2.0",
          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
          "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
        }
      }
    },
    "@shoutem/ui": {
      "version": "0.23.6",
      "resolved": "https://registry.npmjs.org/@shoutem/ui/-/ui-0.23.6.tgz",
      "integrity": "sha512-Gl+JE3Y6215joJi7Zosd3sLHTGUQaZUJ9td795VcYO4Bt7rxI1glNZpESouhqEzRm5TbhIZSc2/MItmgmlDB6g==",
      "requires": {
        "@shoutem/animation": "0.12.2",
        "@shoutem/theme": "0.11.1",
        "babel-plugin-transform-decorators-legacy": "1.3.5",
        "buffer": "4.5.1",
        "events": "1.1.0",
        "html-entities": "1.2.1",
        "htmlparser2": "3.9.2",
        "lodash": "4.17.10",
        "prop-types": "15.6.2",
        "qs": "4.0.0",
        "react-native-lightbox": "github:shoutem/react-native-lightbox#91f3f58759e9901d9c006b01ce32d074606eda0e",
        "react-native-linear-gradient": "2.4.2",
        "react-native-navigation-experimental-compat": "github:shoutem/react-native-navigation-experimental-compat#fbce4b9e478f808634a98dac48901ec6ed4ee9fd",
        "react-native-photo-view": "github:shoutem/react-native-photo-view#2f650beba07a263876c54f81a34b5ac2f9b805ce",
        "react-native-transformable-image": "github:shoutem/react-native-transformable-image#ef2e93fa9425bbb479bccec64d165ec85e76e949",
        "react-native-vector-icons": "4.3.0",
        "stream": "0.0.2",
        "tinycolor2": "1.3.0"
      }
    }

kiwicopple avatar Nov 12 '18 03:11 kiwicopple

@jjgumucio 's Workaround fixed the issue for me. Replaced the setStatusBarStyle method with @jjgumucio 's method and it showed the device variable missing. For that add the following import and you should be good to go import {Device} from '@shoutem/ui/helpers/device-selector';

shaanxd avatar Nov 13 '18 09:11 shaanxd

@jjgumucio 's Workaround fixed the issue for me. Replaced the setStatusBarStyle method with @jjgumucio 's method and it showed the device variable missing. For that add the following import and you should be good to go import {Device} from '@shoutem/ui/helpers/device-selector';

Thanks shaanxd. this is fixed the issue. Change stage in @shoutem/ui library. In file : https://github.com/shoutem/ui/blob/develop/components/NavigationBar/NavigationBar.js

add line: import {Device} from '@shoutem/ui/helpers/device-selector'; Delete line 33: const { statusBarColor } = this.props; Fix line 35: const color = statusBarColor || bgColor; => const color = bgColor;`

lnanhkhoa avatar Nov 26 '18 04:11 lnanhkhoa

npm i -save @shoutem/[email protected]

This beta version is working.

Chris533 avatar Nov 26 '18 14:11 Chris533

npm i -save @shoutem/[email protected]

This beta version is working.

hi @Chris533 , It not work for me.

lnanhkhoa avatar Nov 27 '18 03:11 lnanhkhoa

@jjgumucio I confirm that this solution is working.

added on NavigationBar.js: import { Device } from "@shoutem/ui/helpers/device-selector.js";

and inside function setStyle (same file) replace the declaration of statusBarColor by: const { statusBarColor } = this.props ? this.props : { statusBarColor: bgColor };

alexvuta avatar Nov 27 '18 20:11 alexvuta

npm i -save @shoutem/[email protected] This beta version is working.

hi @Chris533 , It not work for me.

Edit the file 'package.json':

 "dependencies": {
    ...
    "@shoutem/ui": "0.23.6",
    ...
  },

Then run yarn install and reload.

Finally fix iPhoneX+ like this

import React, { Component } from 'react'
import { ImageBackground, NavigationBar, Title } from '@shoutem/ui'

import styles from './styles/NavBarStyle'

export default class NavBar extends Component<props> {
  render() {
    return (
        <ImageBackground
            source={require('../assets/img/navBg.png')}
            style={styles.image}
        >
          <NavigationBar
              styleName='clear'
              centerComponent={
                <Title style={styles.title}>{this.props.title}</Title>}
          />
        </ImageBackground>
    )
  }
}

NavBarStyle:

import { StyleSheet, Dimensions, Platform } from 'react-native'

function isIphoneXorAbove() {
  const dimen = Dimensions.get('window')
  return (
      Platform.OS === 'ios' &&
      !Platform.isPad &&
      !Platform.isTVOS &&
      ((dimen.height === 812 || dimen.width === 812) || (dimen.height === 896 || dimen.width === 896))
  )
}

const styles = StyleSheet.create({
  image: {
    width: '100%',
    height: isIphoneXorAbove() ? 70 : 50
  },
  title: {
    paddingBottom: isIphoneXorAbove() ? 0 : 20
  }
})

export default styles

Why should I do this, I got a thin black bar in the last version(@alexvuta's way).

Chris533 avatar Nov 29 '18 01:11 Chris533

@Chris533

Thanks for your response but is not working. Here are my dependencies trought EXPO:

"dependencies": {
    "@shoutem/theme": "^0.11.1",
    "@shoutem/ui": "0.23.6",
    "amazon-cognito-identity-js": "^3.0.3",
    "apisauce": "^0.14.3",
    "aws-amplify": "^1.1.10",
    "aws-amplify-react-native": "^2.0.8",
    "expo": "23.0.4",
    "format-json": "^1.0.3",
    "identity-obj-proxy": "^3.0.0",
    "lodash": "^4.17.4",
    "prop-types": "15.6.0",
    "querystringify": "1.0.0",
    "ramda": "^0.25.0",
    "react": "16.0.0",
    "react-native": "0.52.0",
    "react-navigation": "2.13.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-saga": "^0.16.0",
    "reduxsauce": "0.7.0",
    "seamless-immutable": "^7.1.2"
  },

and i got this:

[22:20:26] TypeError: TypeError: getScene is not a function. (In 'getScene()', 'getScene' is undefined)

EDIT:

complete stacktrace:

[22:42:04] Warning: Failed context type: The context `getScene` is marked as required in `NavigationBar`, but its value is `undefined`.
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:71:16 in error
- node_modules\react-native\node_modules\prop-types\checkPropTypes.js:19:20 in printWarning
- node_modules\react-native\node_modules\prop-types\checkPropTypes.js:83:12 in checkPropTypes
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:4668:6 in getMaskedContext
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:5889:25 in constructClassInstance
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7818:31 in updateClassComponent
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10513:25 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10584:43 in workLoop
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:134:15 in _invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:67:32 in invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10677:30 in renderRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11449:34 in performWorkOnRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11364:8 in performWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11258:18 in requestWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11099:22 in scheduleWorkImpl
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:5626:19 in enqueueSetState
- node_modules\react\cjs\react.development.js:218:31 in setState
* App\Containers\App.js:53:8 in componentWillMount$
- node_modules\react-native\node_modules\regenerator-runtime\runtime.js:62:44 in tryCatch
- node_modules\react-native\node_modules\regenerator-runtime\runtime.js:296:30 in invoke
- ... 13 more stack frames from framework internals

[22:42:04] Warning: Failed context type: The context `setNavBarProps` is marked as required in `NavigationBar`, but its value is `undefined`.
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:71:16 in error
- node_modules\react-native\node_modules\prop-types\checkPropTypes.js:19:20 in printWarning
- node_modules\react-native\node_modules\prop-types\checkPropTypes.js:83:12 in checkPropTypes
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:4668:6 in getMaskedContext
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:5889:25 in constructClassInstance
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7818:31 in updateClassComponent
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10513:25 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10584:43 in workLoop
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:134:15 in _invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:67:32 in invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10677:30 in renderRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11449:34 in performWorkOnRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11364:8 in performWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11258:18 in requestWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11099:22 in scheduleWorkImpl
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:5626:19 in enqueueSetState
- node_modules\react\cjs\react.development.js:218:31 in setState
* App\Containers\App.js:53:8 in componentWillMount$
- node_modules\react-native\node_modules\regenerator-runtime\runtime.js:62:44 in tryCatch
- node_modules\react-native\node_modules\regenerator-runtime\runtime.js:296:30 in invoke
- ... 13 more stack frames from framework internals

[22:42:06] Warning: Failed context type: The context `clearNavBarProps` is marked as required in `NavigationBar`, but its value is `undefined`.
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:71:16 in error
- node_modules\react-native\node_modules\prop-types\checkPropTypes.js:19:20 in printWarning
- node_modules\react-native\node_modules\prop-types\checkPropTypes.js:83:12 in checkPropTypes
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:4668:6 in getMaskedContext
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:5889:25 in constructClassInstance
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7818:31 in updateClassComponent
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10513:25 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10584:43 in workLoop
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:134:15 in _invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:67:32 in invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10677:30 in renderRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11449:34 in performWorkOnRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11364:8 in performWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11258:18 in requestWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11099:22 in scheduleWorkImpl
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:5626:19 in enqueueSetState
- node_modules\react\cjs\react.development.js:218:31 in setState
* App\Containers\App.js:53:8 in componentWillMount$
- node_modules\react-native\node_modules\regenerator-runtime\runtime.js:62:44 in tryCatch
- node_modules\react-native\node_modules\regenerator-runtime\runtime.js:296:30 in invoke
- ... 13 more stack frames from framework internals

[22:42:11] TypeError: TypeError: getScene is not a function. (In 'getScene()', 'getScene' is undefined)

This error is located at:
    in NavigationBar (at connectStyle.js:248)
    in Styled(NavigationBar) (at LaunchScreen.js:43)
    in RCTView (at View.js:71)
    in View (at connectAnimation.js:261)
    in Animated(View) (at connectStyle.js:248)
    in Styled(Animated(View)) (at LaunchScreen.js:42)
    in RCTView (at View.js:71)
    in View (at View.js:32)
    in View (at connectAnimation.js:261)
    in Animated(View) (at connectStyle.js:248)
    in Styled(Animated(View)) (at LaunchScreen.js:41)
    in LaunchScreen (created by Connect(LaunchScreen))
    in Connect(LaunchScreen) (at SceneView.js:9)
    in Provider (at SceneView.js:8)
    in SceneView (at StackViewLayout.js:481)
    in RCTView (at View.js:71)
    in View (at createAnimatedComponent.js:147)
    in AnimatedComponent (at screens.js:15)
    in Screen (at StackViewCard.js:41)
    in Card (at createPointerEventsContainer.js:26)
    in Container (at StackViewLayout.js:506)
    in RCTView (at View.js:71)
    in View (at StackViewLayout.js:399)
    in RCTView (at View.js:71)
    in View (at StackViewLayout.js:398)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:40)
    in RCTView (at View.js:71)
    in View (at Transitioner.js:141)
    in Transitioner (at StackView.js:19)
    in StackView (at createNavigator.js:59)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:376)
    in NavigationContainer (at RootContainer.js:21)
    in RCTView (at View.js:71)
    in View (at RootContainer.js:19)
    in RootContainer (created by Connect(RootContainer))
    in Connect(RootContainer) (at App.js:53)
    in Provider (at App.js:52)
    in App
    in RCTView (at View.js:71)
    in View
    in Unknown (at registerRootComponent.js:34)
    in RootErrorBoundary (at registerRootComponent.js:33)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)

This error is located at:
    in NavigationContainer (at RootContainer.js:21)
    in RCTView (at View.js:71)
    in View (at RootContainer.js:19)
    in RootContainer (created by Connect(RootContainer))
    in Connect(RootContainer) (at App.js:53)
    in Provider (at App.js:52)
    in App
    in RCTView (at View.js:71)
    in View
    in Unknown (at registerRootComponent.js:34)
    in RootErrorBoundary (at registerRootComponent.js:33)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
* null:null in setNavBarProps
* null:null in NavigationBar
- node_modules\react-proxy\modules\createClassProxy.js:98:23 in <unknown>
- node_modules\react-proxy\modules\createClassProxy.js:96:6 in instantiate
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:5891:28 in constructClassInstance
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7818:31 in updateClassComponent
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10513:25 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10584:43 in workLoop
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:134:15 in _invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:67:32 in invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10677:30 in renderRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11449:34 in performWorkOnRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11364:8 in performWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11258:18 in requestWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11099:22 in scheduleWorkImpl
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:5626:19 in enqueueSetState
- node_modules\react\cjs\react.development.js:218:31 in setState
* App\Containers\App.js:53:8 in componentWillMount$
- node_modules\react-native\node_modules\regenerator-runtime\runtime.js:62:44 in tryCatch
- node_modules\react-native\node_modules\regenerator-runtime\runtime.js:296:30 in invoke
- ... 13 more stack frames from framework internals

Thanks!

alexvuta avatar Nov 30 '18 21:11 alexvuta