React Native ref.injectJavascript on WebView always undefined

Question

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:

import React, {useRef, useEffect} from 'react';
import {WebView} from 'react-native-webview';

export default (props) => {

  const webViewRef = useRef();

  React.useEffect(() => {
    const unsubscribe = props.navigation.addListener('focus', () => {
      webViewRef.current.injectJavascript('console.log("Hello World")');
    });
    return unsubscribe;
  }, []);

  return (
    <WebView ref={webViewRef} />
  );
}

For some reason, webViewRef is always undefined in the listener.

If I do something like <WebView ref={(r) => console.log(r)} /> I get something like the following:

EDIT:

Simply adjusting the provided example -does- work, so I suppose I will have to figure out what is going on in my code:

import React, { useRef } from 'react'
import { View } from 'react-native'
import { WebView } from 'react-native-webview'

export default () => {

  const webViewRef = useRef(null);

  const run = `
    document.body.style.backgroundColor = 'blue';
    true;
  `

  setTimeout(() => {
    webViewRef.current.injectJavaScript(run)
  }, 3000)

  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        source={{
          uri:
            'https://github.com/react-native-community/react-native-webview',
        }}
      />
    </View>
  )
}

EDIT 2: Adjusting the simple example and attempting to use the ref inside the listener does not work:

import React, { useRef } from 'react'
import { View } from 'react-native'
import { WebView } from 'react-native-webview'

export default (props) => {

  const webViewRef = useRef(null);



  const run = `
    document.body.style.backgroundColor = 'blue';
    true;
  `
  const handleLoadEnd = () => {
    props.navigation.addListener('focus', () => {
      webViewRef.current.injectJavascript(run)
    })
  }

  return (
    <View style={{ flex: 1 }}>
      <WebView
        ref={webViewRef}
        source={{
          uri:
            'https://github.com/react-native-community/react-native-webview',
        }}
        onLoadEnd={handleLoadEnd}
      />
    </View>
  )
}

Edit 3: useFocusEffect also has same problem:

  useFocusEffect(
    React.useCallback(() => {
      webViewRef.current.injectJavascript('alert("HI")')
    }, [props.navigation])
  )

Sources:

Could you check you can access webViewRef.current out of addListener? — Stark Jeon
– Stark Jeon, Commented Sep 9, 2020 at 13:10
Can you test your code with a setTimeout with a delay of 3000-5000ms? If the ref is still undefined then something is wrong. And also you can create a useEffect within the array you pass the ref. If it's set it will be called automatically — Arbnor
– Arbnor, Commented Sep 9, 2020 at 13:26
There is definitely something weird about the way this is working with the listener - as I can use the ref if it is called directly inside useEffect. In the listener, even with the timeout, it is not working. — waffl
– waffl, Commented Sep 9, 2020 at 14:06

waffl · Accepted Answer · 2020-09-09 15:12:44Z

22

Oh man, it's really another one of those epic hair pulling days:

  webViewRef.injectJavascript < BAD
  webViewRef.injectJavaScript < GOOD

Somebody please give the last 4 hours of my life back

answered Sep 9, 2020 at 15:12

waffl

5,55915 gold badges82 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harrison Over a year ago

thank you for this, that capital S in JavaScript really is naughty.

waffl Over a year ago

Funny enough I just had one of these terrible situations today with a library where the option I needed was lazyLoad not lazyload

amit.s19 Over a year ago

thanks a lot man! I literally spent hours trying to solve this smh!

Tracer69 · Accepted Answer · 2020-09-09 13:25:59Z

2

The ref will be set, if the onLoadEnd event has triggered. So you must adjust your code like so:

export default (props) => {

  const webViewRef = useRef();

  const handleLoadEnd = () => {
    props.navigation.addListener('focus', () => {
      webViewRef.current.injectJavascript('console.log("Hello World")');
    });
  }

  return (
    <WebView ref={webViewRef} onLoadEnd={handleLoadEnd}/>
  );
}

I have a working example. See here https://github.com/Tracer1337/MRGVP/blob/master/vertretungsplan/components/PaginatedWebview/PaginatedWebview.js

answered Sep 9, 2020 at 13:25

Tracer69

1,1301 gold badge12 silver badges28 bronze badges

2 Comments

waffl Over a year ago

Thankyou, this makes sense and I've added the listener to onLoadEnd but am still having the same issue, webViewRef is undefined :(

waffl Over a year ago

So this is not working unfortunately, and I think it can be narrowed down to the listener, please see the example in Edit 2 of my post

Collectives™ on Stack Overflow

React Native ref.injectJavascript on WebView always undefined

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related