title: How to access ref of a component through a function in React Native?
body: <p>I've imported a custom <code>component</code> into my <code>screen</code> and rendered it in the <code>render()</code> function. Then, created a <code>ref</code> to that custom component. Now, the <code>render()</code> function simply looks like this.</p>
  
  <pre><code>render() {
    return (
      &lt;View&gt;
        &lt;MyComponent ref={component =&gt; this.myComponent1 = component} /&gt;
        &lt;MyComponent ref={component =&gt; this.myComponent2 = component} /&gt;
        &lt;MyComponent ref={component =&gt; this.myComponent3 = component} /&gt;
      &lt;/View&gt;
    )
  }
  </code></pre>
  
  <p>Then, In the same <code>screen</code> file, I've created another function to access the state of my custom component. I wrote it like this.</p>
  
  <pre><code>myFunction = (ref) =&gt; {
    ref.setState({ myState: myValue })
  }
  </code></pre>
  
  <p>Then, I want to call that function for those separate components separately like this. (In the <code>screen</code> file)</p>
  
  <pre><code>this.myFunction(this.myComponent1)
  this.myFunction(this.myComponent2)
  this.myFunction(this.myComponent3)
  </code></pre>
  
  <p>But, it does not work. It gives me the following error.</p>
  
  <p><code>null is not an object (evaluating 'ref.setState')</code></p>
  
  <p>Actually what I need this <code>myFunction</code> to do is,</p>
  
  <pre><code>this.myComponent1.setState({ myState: myValue })
  this.myComponent2.setState({ myState: myValue })
  this.myComponent3.setState({ myState: myValue })
  </code></pre>
  
  <p>The state <code>myState</code> is in the <code>component</code> while I want to access it through the <code>myFunction()</code> in my <code>screen</code> file.</p>
  
  <p>Can you please help me to solve this problem?</p>