title: How to type Stateless Functional Component using styled-component in React-Native with TypeScript?
body: <p>Since one week we are using styled-component width React-Native and Typescript in my team project.</p>
  
  <p>I'm forming myself on it and try to understand how to correctly use it with Typescript.</p>
  
  <h2>My problem</h2>
  
  <p>I actually have problem to understand how am I supposed to type a Stateless Functional Component with styled method. </p>
  
  <h2>Actual code</h2>
  
  <p>Here is what I have following the <a href="https://www.styled-components.com/docs/basics#styling-any-components" rel="nofollow noreferrer">doc</a>:</p>
  
  <pre class="lang-js prettyprint-override"><code>const SFCView: SFC&lt;{}&gt; = (props) =&gt; {
    return &lt;View style={props.style} /&gt;
  }
  
  const StyledSFCView = styled(SFCView)`
    width: 100;
    height: 100;
    background-color: green
  `;
  </code></pre>
  
  <h2>My Error</h2>
  
  <p>Typescript says to me that props style does not exist in my type <code>SFC&lt;{}&gt;</code>. Indeed I defined it nowhere.</p>
  
  <h2>What I tried</h2>
  
  <p>I tried to tell typescript that my <code>SFC</code> had those props</p>
  
  <pre class="lang-js prettyprint-override"><code>const SFCView: SFC&lt;{style: ViewStyle}&gt; = (props) =&gt; {
    return &lt;View style={props.style} /&gt;
  }
  </code></pre>
  
  <p>But when I use <code>SFCView</code> somewhere else in my code typescript tell me that I have to specify all the props of a View.</p>
  
  <p>Does anyone know how to correctly type it ?</p>