How to get the theme outside styled-components?
<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>