React-native-web: Style object created with object spread do not get applied on web

[codypearce]

The problem

Applying styles using object spread works on Android and iOS but the styles do not get applied when rendering on the web.

Creating a style object like this

<View
    style={{
        ...styles.bar,
    }}
 />

The styles.bar do not get applied to the object when rendered on the web.

How to reproduce

Simplified test case: https://codesandbox.io/s/43lv9oq1j9

Steps to reproduce:

1. Create a new project
2. Create new styles for bar

bar: {
    height: 56,
    width: 200,
    backgroundColor: "blue"
  }

1. Create a new view that applies those styles with object spread

<View
    style={{
        ...styles.bar,

    }}
 />

1. Run project and the <View /> does not have the styles.

Expected behavior

I'd expect the object spread values to be applied to the view in the same way it does on iOS and Android.

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.10.0
• React (version): 16.6.3
• Browser: Chrome

If I refactor styles to use array syntax then it does work on all platforms

<View
    style={[styles.bar]}
 />

However I prefer object spread syntax because it makes declaring dynamic properties cleaner in my opinion

<View
    style={{
        ...styles.bar,
       backgroundColor: this.state.dynamicColor
    }}
 />

vs

<View
    style={[
       styles.bar,
       {backgroundColor: this.state.dynamicColor},
    ]}
 />

[necolas]

The spread syntax is not supported with StyleSheet.create. It's only very recently that React Native made an internal change that allows this use to occur as a side-effect. But you should avoid creating new objects like this in the render method, as it is bad for performance. Instead, continue using the array syntax to combine styles.