title: How to get the theme outside styled-components?
body: <p>I know how to get the <code>theme</code> from components that are created using the <code>styled</code> way:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>const StyledView = styled.View`
      color: ${({ theme }) =&gt; theme.color};
  `;
  </code></pre>
  
  <p>But how to get from <strong>normal components</strong> or apply it for <strong>different properties</strong>? Example:</p>
  
  <p><code>index.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;ThemeProvider theme={{ color: 'red' }}&gt;
      &lt;Main /&gt;
  &lt;/ThemeProvider&gt;
  </code></pre>
  
  <p><code>main.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;View&gt;
      &lt;Card aCustomColorProperty={GET COLOR FROM THEME HERE} /&gt;
  &lt;/View&gt;
  </code></pre>
  
  <blockquote>
    <p>Notice how the property that needs the theme is not called <code>style</code> </p>
  </blockquote>