title: Dynamically Styled Button in React Native using Styled Components
body: <p>A Button component is generally comprised of the Text element wrapped with a TouchableHighlight (or other touchable). I'm trying to create a Button component styled using styled-components, but am having trouble getting my style to respond dynamically to props. </p>
  
  <h1>Button Component</h1>
  
  <p>Below, I've created a Button component similar to the <a href="https://www.styled-components.com/docs/basics#adapting-based-on-props" rel="noreferrer">Adapting based on props</a> example found in the styled-component docs.</p>
  
  <pre><code>import React from 'react';
  import { Text, TouchableHighlight } from 'react-native';
  import styled from 'styled-components/native';
  
  const colors = {
      accent: '#911',
      highlight: '#D22',
      contrast: '#FFF',
  }
  
  const Label = styled.Text`
    color: ${props =&gt; !props.outline ? colors.contrast : colors.accent};
    font-weight: 700;
    align-self: center;
    padding: 10px;
  `
  
  const ButtonContainer = styled.TouchableHighlight`
    background-color: ${props =&gt; props.outline ? colors.contrast : colors.accent};
    width: 80%;
    margin-top: 5px;
    border-color: ${colors.accent};
    border-width: 2px;
  `
  
  const Button = (props) =&gt; {
      return (
          &lt;ButtonContainer
              onPress={props.onPress}
              underlayColor={colors.highlight}
          &gt;
              &lt;Label&gt;
                  {props.children}
              &lt;/Label&gt;
          &lt;/ButtonContainer&gt;
      );
  };
  
  export default Button;
  </code></pre>
  
  <h1>Button Usage</h1>
  
  <p>After importing it, I'm using the button like this...</p>
  
  <pre><code>    &lt;Button
        outline
        onPress={() =&gt; console.log('pressed')}&gt;
        Press Me!
      &lt;/Button&gt;
  </code></pre>
  
  <h1>Expected Result</h1>
  
  <p>And so, I would expect my button to look like this...</p>
  
  <p><a href="https://i.stack.imgur.com/cwMDI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cwMDI.png" alt="enter image description here"></a></p>
  
  <h1>Actual Result</h1>
  
  <p>But instead it looks like this...
  <a href="https://i.stack.imgur.com/OErVF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OErVF.png" alt="enter image description here"></a></p>
  
  <h1>What I've done to troubleshoot so far</h1>
  
  <p>When I inspect using <a href="https://github.com/facebook/react-devtools" rel="noreferrer">react-devtools</a>, I can see that the <code>outline</code> prop is being passed down to the <code>Button</code> component.</p>
  
  <p><a href="https://i.stack.imgur.com/hNB3w.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hNB3w.png" alt="enter image description here"></a></p>
  
  <p>But the prop is not passed down to any of it's children</p>
  
  <p><a href="https://i.stack.imgur.com/Ij2xY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ij2xY.png" alt="enter image description here"></a></p>
  
  <p>The <a href="https://www.styled-components.com/docs/basics#passed-props" rel="noreferrer">Passed Props</a> part of the docs state, "styled-components pass on all their props", but I guess not all the way down?</p>
  
  <h1>My Question</h1>
  
  <p>What do I need to change so that I can dynamically style my Button based on it's props?</p>