Why is not allowing spread operator in React Native component property assignment a performance optimization?

Question

In a React Native component if the spread operator is used in the props assignment, an error, "In this environment the target of assign MUST be an object. This error is a performance optimization and not spec compliant." is thrown.

For example, in render function

const { style } = props;
  return (
    <View style={{borderWidth: 1, ...style}}>

gives

meanwhile

const { style } = props;
  return (
    <View style={{borderWidth: 1, paddingLeft: 1}}>

works. Why does the spread syntax affect performance?

Answer 1

Actually it turns out to be Number when the style property passed to the child component if you use StyleSheet.create().

Answer 2

According to the accepted answer on this question. You cannot use ... in a style definition because StyleSheet.create() doesn't return a regular javascript object.

However, you can use ... during the initialization of a StyleSheet, i.e.

const styles = StyleSheet.create({
    container: {
        ...StyleSheet.absoluteFillObject,
        top:null,
    }
})

To solve your issue, you should use flatten:

const { style } = props;
StyleSheet.flatten([style, {borderWidth: 1}])