title: How to type the style property for components to accept arrays?
body: <p>In React Native, view elements accept a <code>style</code> property that uses CSS property names in a camel cased object:</p>
  
  <pre><code>const styleObj = {
    width: 200,
    marginTop: 10
  }
  </code></pre>
  
  <p>Elements also accept an array of style objects like this:</p>
  
  <pre><code>&lt;MyComponent style={[ styleObj, styleProp &amp;&amp; styleProp ]} /&gt;
  </code></pre>
  
  <p>I have several abstracted button components that rely on a shared base button interface. For simplicities sake:</p>
  
  <pre><code>interface IButton {
    style?: ViewStyle | ViewStyle[] // &lt;-- ViewStyle is exported by react native, and contains all the allowed style properties for a View component
  }
  </code></pre>
  
  <p>I thought this definition would be adequate, but I'm running into some issues that I'm having difficulty understanding.</p>
  
  <p>I have a <code>DropDown</code> component which renders a <code>Button</code>. When I use the style prop I get an error:</p>
  
  <pre><code>&lt;Button
    style={[
      {
        backgroundColor: backgroundColor || COLORS.lightRed,
        borderRadius: 3,
        height: 44,
        width: '100%',
       },
       style &amp;&amp; style, // &lt;-- type is ViewStyle | ViewStyle[], this is passed in as a prop
    ]}
  </code></pre>
  
  <p>The above throws the error:</p>
  
  <pre><code>Type (ViewStyle | ViewStyle[] | undefined)[] is not assignable to ViewStyle | ViewStyle[] | undefined
  </code></pre>
  
  <p>If I cast style: <code>style &amp;&amp; (style as ViewStyle)</code> I get a different error:</p>
  
  <pre><code>Type (ViewStyle | undefined)[] is not assignable to ViewStyle[]
  </code></pre>
  
  <p>If I cast the entire array is a <code>ViewStyle</code> the error clears:</p>
  
  <pre><code>&lt;Button
    style={[
      {
        backgroundColor: backgroundColor || COLORS.lightRed,
        borderRadius: 3,
        height: 44,
        width: '100%',
       },
       style &amp;&amp; style,
    ] as ViewStyle}
  </code></pre>
  
  <p>Which is fine but I'm a bit confused. I have a hunch that, since my components are using the same props interface, TypeScript is getting confused. Ultimately I'm unsure why those errors are happening, and what is incorrect about my definition that I need to rely on casting.</p>