title: unable to apply flex to imported styled component
body: <p>Im importing a styled component into another component and trying to move it by putting it in a View and using flex to push it to the bottom of the screen.  Though in doing so the "styled component is not acting like a child of the View I place it in.  This is limiting the reusability of my styled components.  I'm questioning the use of styled-components now.</p>
  
  <pre><code>import React, {useContext} from 'react';
  import styled from 'styled-components';
  import ThemeContext from '../../../providers/ThemeProvider';
  import {TouchableOpacity, Text} from 'react-native';
  
  const Button = styled.TouchableOpacity`
    display: flex;
    height: 50px;
    width: 90%;
    background-color: ${props=&gt; props.theme.primaryColor};
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    margin: auto;
  `;
  
  export const AuthButton = props =&gt; {
    return (
      &lt;Button onPress={() =&gt; props.onPress()}&gt;
        &lt;Text style={{fontSize: 20, color: '#fff'}}&gt;{props.text}&lt;/Text&gt;
      &lt;/Button&gt;
    );
  };
  
  
  
  
  &lt;Wrapper&gt;
          &lt;View style={{borderColor:'lime', borderWidth: 1, flex: 1, justifyContent: 'flex-end'}}&gt;
          &lt;AuthButton text="Logout" onPress={()=&gt; logoutUser()}/&gt;
          &lt;/View&gt;
      &lt;/Wrapper&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/eGvev.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eGvev.png" alt="enter image description here"></a></p>