React-native: TypeError: In this environment the sources for assign MUST be an object. This error is a performance optimization and not spec compliant.

[selabie68]

• [x] I have reviewed the documentation
• [x] I have searched existing issues
• [x] I am using the latest React Native version

Environment

Environment:
  OS: macOS High Sierra 10.13.4
  Node: 8.11.1
  Yarn: 1.5.1
  npm: 6.0.0
  Watchman: 4.9.0
  Xcode: Xcode 9.3 Build version 9E145
  Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.3 => 0.55.3

Steps to Reproduce

Happens on loading of app.

[fungilation]

I'm hitting the same, in multiple components on Android and only Android:

                <View
                    style={[
                        styles.stickyHeader,
                        {
                            width: viewWidth,
                            ...(stickyHeaderHeight ? { height: stickyHeaderHeight } : null),
                        },
                    ]}
                >
...

(in my forked version of https://github.com/maxs15/react-native-modalbox/blob/master/index.js)

Redbox error:

By process of elimination, I tried taking out components that included the offending line that triggered the same In this environment the sources for assign MUST be an object... error. I take one component out, another component gives the same error. (above snippet is one sample of where error triggers)

Looking at https://github.com/facebook/react-native/blob/0.54-stable/Libraries/polyfills/Object.es6.js which throws this error. This error is thrown only when __DEV__ is true. So why bother? I breaks my app in dev and only in dev, when it should have allowed my app to continue executing. (hitting Dismiss on redbox ends with my app stalled on a white screen)

Can this error be changed to a console.warn instead of a redbox on __DEV__?

PS. in my app, iOS works fine and I support only iOS 9 and up. I just started testing on Android, and I keep hitting this error. I assume issue writer above is hitting this on iOS 8 or lower.

[react-native-bot]

Closing as the original issue has no description of the issue. Please open a new issue with more information.

[fungilation]

Hey stupid bot, there's plenty of description here including screenshots.

[blackflame007]

The bot is right, I had the exact same error message and I just fixed it. Your error message is just not telling you your error. I was working in an Expo react native project with the Animated library dealing with rotation. To rotate with degrees one must use a string ex '-120deg'. My error was I put '-120eg' on my strings. I'd say you are sending data as the wrong type in one of your files. @fungilation @selabie68

[J-S-Thomas]

Im having the same error following Scott Talinski (level up) tutorial called React Native For Everyone (video #12) cant figure out wtf is going on here. iOS and Android is bugging out. where the hell is View(at YellowBox.js:425)?

[marcoautiero]

@fungilation I just noticed a particular in your code, similar to a particular in my code
you're trying to add an object property in this way:
...(stickyHeaderHeight ? { height: stickyHeaderHeight } : null),
but this should be

...(stickyHeaderHeight ? { height: stickyHeaderHeight } : {}),

As well as I was trying to use

...(caloriesInDay && { calories: caloriesArr.reduce((a,b)=>{return a+b},0)} )
but the right way is
...(caloriesInDay ? { calories: caloriesArr.reduce((a,b)=>{return a+b},0)} : {} )

[fungilation]

Interesting. I've since avoided the issue at init by always assigning a int to stickyHeaderHeight.

[skiral]

I faced the same issue, the issue happens when you try to use spread operator on a non object|array
...(NON_OBJECT_OR_ARRAY) will fail
I am experiencing it in JSX.

[jasperkuperus]

For me, the error happened when passing something different than an Object to a prop that has a proptype of Object:

<Menu
  scrollViewProps={hasProps && {
    prop1: 'value',
  }}
/>

Simple solution:

<Menu
  scrollViewProps={(hasProps ? {
    prop1: 'value',
  }: {})}
/>

[ldgarcia]

In my case I incorrectly curried a function inside my component class:

javascript // Incorrect, with typo renderFoo = (x) = (y) => {} // Correct renderFoo = (x) => (y) => {}

[Sumit-Chakole]

I faced the same issue, the issue happens when you try to use spread operator on a non object|array
...(NON_OBJECT_OR_ARRAY) will fail
I am experiencing it in JSX.

This explaination is absolutely correct!