title: React-Native Styled-Components attrs dynamic styles
body: <p>I'm trying to have my component use dynamic styles in react-native using styled-components.  The way to do this is shown here <a href="https://github.com/styled-components/styled-components/issues/940" rel="nofollow noreferrer">https://github.com/styled-components/styled-components/issues/940</a>  </p>
  
  <pre><code>const ColorAnimation = styled.div.attrs({
    style: props =&gt; ({
      color: props.color
    })
  })`
    // static styles 
  </code></pre>
  
  <p>It works in React Native as well, as shown here. 
  <a href="https://snack.expo.io/ryIXsAe0M" rel="nofollow noreferrer">https://snack.expo.io/ryIXsAe0M</a></p>
  
  <pre><code>import React, { Component } from 'react';
  import { View } from 'react-native';
  import styled from 'styled-components/native'; // 2.2.4
  
  const StyledView = styled.View.attrs({
    style: props =&gt; ({
      backgroundColor: props.backgroundColor,
      height: props.height,
    }),
  })`
    background-color: papayawhip;
  `;
  
  const StyledText = styled.Text`
    color: palevioletred;
  `;
  
  const RotatedBox = styled.View`
    transform: rotate(90deg);
    text-shadow-offset: 10px 5px;
    font-variant: small-caps;
    margin: 5px 7px 2px;
  `;
  
  export default class App extends Component {
    render() {
      return (
        &lt;View style={{ marginTop: 50 }}&gt;
          &lt;StyledView height={100} backgroundColor="yellow"&gt;
            &lt;StyledText&gt;Hello World!&lt;/StyledText&gt;
          &lt;/StyledView&gt;
          &lt;RotatedBox /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>However, I'd rather just pass in a customStyle prop that contains all the dynamic styles I want to use. Like this. . .
  <a href="https://snack.expo.io/BkpToRe0f" rel="nofollow noreferrer">https://snack.expo.io/BkpToRe0f</a></p>
  
  <pre><code>const StyledView = styled.View.attrs({
    style: props =&gt; props.customStyles,
  })`
    background-color: papayawhip;
  `;
  
  &lt;StyledView customStyles={{ height: 100, backgroundColor: 'yelllow' }}&gt;
  </code></pre>
  
  <p>Unfortunately, this does not apply the styles.  Does anyone know why this is?  Also if there is an alternative solution?</p>