Webview not responding to goBack() or injectJavascript()

Hello, I’ve noticed that the expo webview is not responding to goBack() or injectJavascript even if the reference is not null. Considering the below code sample, console.log(“backb”); prints correctly a reference, but javascript is not injected and webview won’t go back in any way

import { StatusBar } from 'expo-status-bar';
import React, { useState, useRef, useEffect } from 'react';
import { ActivityIndicator, Linking, SafeAreaView,StyleSheet, BackHandler, Button} from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
    const webViewRef = useRef()
    const [isLoading, setLoading] = useState(false);

    const handleBackButtonPress = () => {
      console.log("backb");
      const run = `document.getElementsByClassName('gLFyf')[0].value = 'World';`;
        try {
          webViewRef.current.injectJavaScript(run);
          console.log(webViewRef.current)
            webViewRef.current?.goBack()
        } catch (err) {
            console.log("[handleBackButtonPress] Error : ", err.message)
        }

        return false;
    }

    useEffect(() => {
        BackHandler.addEventListener("hardwareBackPress", handleBackButtonPress)
        return () => {
            BackHandler.removeEventListener("hardwareBackPress", handleBackButtonPress)
        };
    }, []);

    return (
      <SafeAreaView style={styles.safeArea}>
<WebView
            originWhiteList={['*']}
            source={{ uri: 'https://google.com' }}
            style={styles.container} 
            ref={webViewRef}
            onLoadStart={(syntheticEvent) => {
                setLoading(true);
            }}
            onShouldStartLoadWithRequest={(event)=>{
                if (event.navigationType === 'click') {
                    if (!event.url.match(/(google\.com\/*)/) ) {
                        Linking.openURL(event.url)
                        return false
                    }
                    return true
                }
                else{
                    return true;
                }
            }}
            onLoadEnd={(syntheticEvent) => {
                setLoading(false);
            }}
        /><Button
        onPress={handleBackButtonPress}
        title="GoBack"
        color="#841584"
      />
        {isLoading && (
            <ActivityIndicator
            color="#234356"
            size="large"
            style={styles.loading}
            />
        )}
        </SafeAreaView>
      );
  }
const styles = StyleSheet.create({
  safeArea: {
  flex: 1,
  backgroundColor: '#234356'
},
loading: {
  position: 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  alignItems: 'center',
  justifyContent: 'center'
},
container: {
  flex: 1,
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'center',
},
});

I’m testing it with expo app in Android

• react-native version: “0.68.2”,
• react-native-webview version: “^11.23.0”

[iambigmarn]

That problem happens for the react native webview version you are on… Kindly downgrade the version react-native-webview version: “^11.23.0” to react-native-webview version: “^11.18.1”

I think their upgrade broke a code… I also had similar issue

[lennartkloock]

Pretty sad how bad things are maintained in the react native ecosystem. Everyone is always just looking for workarounds instead of fixes because the maintainers don’t seem to care.