title: Error when creating new object from existing one using `...`: In this environment the sources for assign MUST be an object
body: <p>In my React Native app, I have a situation where one particular child of a component that I <code>render</code> should receive either a green or red <code>borderColor</code>. </p>
  
  <p>Now, I don't want to create two separate entries in my <code>styles</code> for these two situations since they only differ in the <code>borderColor</code> property.</p>
  
  <p>My idea was to derive the proper style object from the ones which I have in my <code>styles</code> like so:</p>
  
  <pre><code>const styles = StyleSheet.create({
    amountSection: {
      borderWidth: 1,
      flex: 1,
      flexDirection: 'row',
      borderRadius: 3
    }
  })
  
  render() {
    const amountBorderColor = this.state.isClaim ? 'green' : 'red'
    const amountStyles = {
      ...styles.amountSection,
      borderColor: amountBorderColor
    }
  
    return (
      // ... apply amountStyles at appropriate component
    )
  }
  </code></pre>
  
  <p>However, this code gives the following error: </p>
  
  <blockquote>
    <p>Unhandled JS Exception: In this environment the sources for assign
    MUST be an object.This error is a performance optimization and not
    spec compliant.</p>
  </blockquote>
  
  <p>Apparently the error is hit on the line where I define <code>amountStyles</code>. Anyone knows why this happens? Is there something wrong with my syntax? I am using the <code>...</code> notation to create a new object from an existing one and add some additional properties to it.</p>