title: Can't overwrite external stylesheet property with inline style in React Native
body: <p>I have a custom <code>TextInput</code> component that takes in two stylesheets and appends any inline styles afterwards and passes those to the <code>TextInput</code> <code>style</code> property:</p>
  
  <pre><code>class WSTextInput extends React.Component&lt;TextInputProps&gt; {
    render() {
      return (
        &lt;TextInput
          style={[styles.defaultText, styles.defaultTextInput, this.props.style] as StyleProp&lt;TextStyle&gt;}
          {...this.props}
        /&gt;
      );
    }
  }
  </code></pre>
  
  <p>These are the stylesheets it uses:</p>
  
  <pre><code> defaultText: {
      fontSize: 24,
      fontFamily: 'cardenio-modern'
    },
    defaultTextInput: {
      flex: 1,
      alignSelf: 'stretch',
      textAlign: 'center',
      backgroundColor: '#fafafa',
      borderBottomWidth: 1,
      margin: 10
    }
  </code></pre>
  
  <p>The code works fine so as long as <code>this.props.style</code> does not attempt to overwrite any of the existing properties in <code>defaultText</code> or <code>defaultTextInput</code>.</p>
  
  <p>When I do try to do so, e.g. with this element (note that <code>styles.defaultTextInput</code>'s <code>borderBottomWidth</code> and <code>backgroundColor</code> are overwritten):</p>
  
  <pre><code>&lt;WSTextInput style={{ borderBottomWidth: 0, backgroundColor: 'transparent' }}
              editable={false}
              value={this.state.total.toString()}
            /&gt;
  </code></pre>
  
  <p>Then this is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/fy3nD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fy3nD.png" alt=""></a></p>
  
  <p>The top right element is a <code>WSTextInput</code> rendering correctly without inline overrides; the bottom right element is a <code>WSTextInput</code> with the above inline overrides rendering incorrectly.</p>
  
  <p>When I open <code>reactnative-tools</code> and inspect the element tree, I see this for the top right element:</p>
  
  <p><a href="https://i.stack.imgur.com/m7oJt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m7oJt.png" alt=""></a></p>
  
  <p>And this for the bottom right element:</p>
  
  <p><a href="https://i.stack.imgur.com/IyN3L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IyN3L.png" alt=""></a></p>
  
  <p>So it seems that for the bottom right element, the inline style survives, but both stylesheets are lost.</p>
  
  <p>I have tried different ways of coalescing the properties in <code>WSTextInput.render</code>, e.g. using <code>Object.assign</code> or the spread operator, but the result is the same. Any insights would be appreciated.</p>