title: useRef to control a component that is inside child component
body: <p>I am developing react-native project.</p>
  <p>I have created a custom component inside which I use a 3rd party library component. The 3rd party library component needs the <code>useRef</code> hook from my code so that I can control the library component.</p>
  <pre><code>    import React, {useRef} from 'react';
      ...
      const MyComponent = () =&gt; {
        const ref = useRef();
        return (
          &lt;View&gt;
            &lt;Button
              title=&quot;OPEN 3rd party component&quot;
              onPress={() =&gt; ref.current.open()}
            /&gt; 
            &lt;LibraryComponent
              ref={ref}
              ...
            /&gt;
          &lt;/View&gt;)
  }
  </code></pre>
  <p>Now, I have a screen named <code>MyScreen</code>, I need to show <code>MyComponent</code> on <code>MyScreen</code>, and control that library component from <code>MyScreen</code> instead of <code>MyComponent</code>. So, I refactored <code>MyComponent</code> to this (I removed the <code>Button</code> and change <code>ref</code> to be a pass-in property):</p>
  <pre><code>const MyComponent = ({ref}) =&gt; {
      
        return (
          &lt;View&gt;
            &lt;LibraryComponent
              ref={ref}
              ...
            /&gt;
          &lt;/View&gt;)
  }
  </code></pre>
  <p>Then, in <code>MyScreen</code> :</p>
  <pre><code>import React, {useRef} from 'react';
  import MyComponent from '../components/MyComponent';
  
  export const MyScreen = () =&gt; {
      const screenRef = useRef();
      ...
  
      return (
        &lt;View style={styles.container}&gt;
            &lt;Button onPress=&gt;{()=&gt;screenRef.current.open()}/&gt;
            &lt;MyComponent ref={screenRef}&gt;
            ...
        &lt;/View&gt;
      )
     
  }
  </code></pre>
  <p>But I get warning message: <code>Function components cannot be give refs. Attempts to access this ref will fail.  Did you mean to use React.ForwardRef() ?</code></p>
  <p>My questions is:</p>
  <p>How to get rid of that warning &amp; having <code>MyScreen</code> control the library component with reference hook?</p>
  <p><strong>======== UPDATE =======</strong></p>
  <p>I changed the name of the property in <code>MyComponent</code> from <code>ref</code> to <code>innerRef</code> like @Rishabh Anand suggested. The warning disappeared.</p>
  <pre><code>const MyComponent = ({innerRef}) =&gt; {
    ...
  }
  </code></pre>
  <p>MyScreen is now:</p>
  <pre><code>  export const MyScreen = () =&gt; {
          const screenRef = useRef();
          ...
      
          return (
            &lt;View style={styles.container}&gt;
                &lt;Button onPress=&gt;{()=&gt;screenRef.current.open()}/&gt;
                &lt;MyComponent innerRef={screenRef}&gt;
                ...
            &lt;/View&gt;
          )
         
      }
  </code></pre>
  <p>But now a new issue comes, when I click on the <code>Button</code> of <code>MyScreen</code>, app crashed with error <code>undefined is not an object (evaluating screenRef.current.open)</code>. It seems the <code>screenRef.current</code> holds a <code>null</code> instead of the library component. Why?</p>