I am fighting with this problem for about a week. It is React Native, and I am using React Native Webview for my project.
I am having problems using injectJavaScript with the WebView referenced. Here is my code.
import WebView from 'react-native-webview';
const ParentView = () => {
const ref = useRef<WebView>(null);
const wrapperContent = `
<body><div>some content</div></body>
`;
const onButtonClick = () => {
console.log(ref.current);
ref.current.injectJavaScript(`alert("here"); true;`);
}
return <View>
<WebView
ref={ref}
source={{html: webViewWrapperContent}}
style={{width: '100%', height: '100%'}}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
scrollEnabled={false}
originWhitelist={['*']}
sharedCookiesEnabled={true}
javaScriptEnabled={true}
domStorageEnabled={true}
injectedJavaScript={`console.log("injected")`}
javaScriptCanOpenWindowsAutomatically={true}
onMessage={(event) => {}}
/>
<Button onPress={onButtonClick}></Button>
</View>
}
This code prints "injected" to the console correctly. And when I click the button, then it prints this: console output
As you can see there, there is no injectJavaScript object.
I am on React Native 0.68.2, and React Native Webview 11.23.1, and building web in windows machine.
I tried almost everything I can find with Stack Overflow and their Github issues.
A simple spelling mistake but this shows injectJavaScript in the ref object.
This issue is very close, but how come they can say it works on Windows even if it doesn't have injectJavaScript?
Also, I tried putting the injectJavaScript in setTimeout,
I am sure I am doing something wrong with the configuration, or is it something I cannot use with windows machines?
I would like to get this work. I have other workarounds, like using websocket and broadcast to send the click event to server and listen to that thread within the WebView, but this is (obviously) an ill pattern.
Please help me fixing this issue. Thanks in advance!