title: React Native Functional Component - ref "No overload matches this call."
body: <p>I'm new to JavaScript/TypeScript and React Native - especially the hooks. But I've got this functional component and I'm trying to figure out how to use refs with components. I'm not sure that I'm using the ref correctly here (I'm thinking I might need to put it in a different context, but that's not my main concern at the moment). What I'm trying to figure out is how to use refs/hooks in a React Native functional component.</p>
  <p>Here's what I've got for now:</p>
  <pre class="lang-js prettyprint-override"><code>export default function BasicView(
    props: BasicViewProps
  ): JSX.Element {
    const basicRef = React.createRef();
    return (
      &lt;View
        // Visual Studio Code error on ref: &quot;No overload matches this call.&quot;
        // Note: I've also tried basicRef.current
        ref={basicRef}
        style={{
          maxHeight: 100,
          width: 100,
        }}
      &gt;
        &lt;Text&gt;
          {props.txt}
        &lt;/Text&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  <p>As I played around with this, I noticed that this doesn't give me an error:</p>
  <pre class="lang-js prettyprint-override"><code>   ...
        // This works, though I'm not sure if it's useful at all if it's not a variable.
        ref={React.createRef()}
     ...
  </code></pre>
  <p>What's the appropriate way to use refs and <code>createRef</code> in React Native functional components? I've done a lot of searching around on the internet, and a lot of people seem to have success with refs but I haven't had any success with any of the methods I've seen. So what am I doing wrong here?</p>