shoutem/ui

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

kiwicopple opened this issue · 14 comments

kiwicopple commented

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.

lepresk commented

I have the same problem on android

corelmax commented

same here

jjgumucio commented

We have the same problem...

  • 👍3
jjgumucio commented

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.

  • 👍4
florian-usports commented

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

  • 👀1
yapjinkun commented

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

kiwicopple commented

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"
      }
    }
shaanxd commented

@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';

  • 👍5
lnanhkhoa commented

@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;`

Chris533 commented

npm i -save @shoutem/ui@0.23.6

This beta version is working.

lnanhkhoa commented

npm i -save @shoutem/ui@0.23.6

This beta version is working.

hi @Chris533 ,
It not work for me.

alexvuta commented

@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 };

  • 👍3
Chris533 commented

npm i -save @shoutem/ui@0.23.6
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).

alexvuta commented

@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!