title: React Native ref.injectJavascript on WebView always undefined
body: <p>I have a simple functional component with a WebView inside a TabNavigator where I'd like to inject some javascript when the tab is focused like so:</p>
  <pre><code>import React, {useRef, useEffect} from 'react';
  import {WebView} from 'react-native-webview';
  
  export default (props) =&gt; {
  
    const webViewRef = useRef();
  
    React.useEffect(() =&gt; {
      const unsubscribe = props.navigation.addListener('focus', () =&gt; {
        webViewRef.current.injectJavascript('console.log(&quot;Hello World&quot;)');
      });
      return unsubscribe;
    }, []);
  
    return (
      &lt;WebView ref={webViewRef} /&gt;
    );
  }
  </code></pre>
  <p>For some reason, <code>webViewRef</code> is always undefined in the listener.</p>
  <p>If I do something like <code>&lt;WebView ref={(r) =&gt; console.log(r)} /&gt;</code> I get something like the following:</p>
  <p><a href="https://i.stack.imgur.com/InkAR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/InkAR.png" alt="screenshot" /></a></p>
  <p><strong>EDIT:</strong></p>
  <p>Simply adjusting the provided example -does- work, so I suppose I will have to figure out what is going on in my code:</p>
  <pre><code>import React, { useRef } from 'react'
  import { View } from 'react-native'
  import { WebView } from 'react-native-webview'
  
  export default () =&gt; {
  
    const webViewRef = useRef(null);
  
    const run = `
      document.body.style.backgroundColor = 'blue';
      true;
    `
  
    setTimeout(() =&gt; {
      webViewRef.current.injectJavaScript(run)
    }, 3000)
  
    return (
      &lt;View style={{ flex: 1 }}&gt;
        &lt;WebView
          ref={webViewRef}
          source={{
            uri:
              'https://github.com/react-native-community/react-native-webview',
          }}
        /&gt;
      &lt;/View&gt;
    )
  }
  </code></pre>
  <p><strong>EDIT 2:</strong> Adjusting the simple example and attempting to use the ref inside the listener does not work:</p>
  <pre><code>import React, { useRef } from 'react'
  import { View } from 'react-native'
  import { WebView } from 'react-native-webview'
  
  export default (props) =&gt; {
  
    const webViewRef = useRef(null);
  
  
  
    const run = `
      document.body.style.backgroundColor = 'blue';
      true;
    `
    const handleLoadEnd = () =&gt; {
      props.navigation.addListener('focus', () =&gt; {
        webViewRef.current.injectJavascript(run)
      })
    }
  
    return (
      &lt;View style={{ flex: 1 }}&gt;
        &lt;WebView
          ref={webViewRef}
          source={{
            uri:
              'https://github.com/react-native-community/react-native-webview',
          }}
          onLoadEnd={handleLoadEnd}
        /&gt;
      &lt;/View&gt;
    )
  }
  </code></pre>
  <p>Edit 3: <code>useFocusEffect</code> also has same problem:</p>
  <pre><code>  useFocusEffect(
      React.useCallback(() =&gt; {
        webViewRef.current.injectJavascript('alert(&quot;HI&quot;)')
      }, [props.navigation])
    )
  </code></pre>
  <p>Sources:</p>
  <ul>
  <li><a href="https://reactnavigation.org/docs/function-after-focusing-screen/" rel="nofollow noreferrer">React Navigation: Call a function when focused screen changes</a></li>
  <li><a href="https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native" rel="nofollow noreferrer">React Native WebView: Communicating between JS and Native</a></li>
  </ul>