Reputation: 563
I'm trying to execute javascript in a WebView that is loaded on an iOS advice. I'm trying to get a painfully simple example to work but it is consistently throwing an undefined or TypeError.
Here is the code:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
constructor(props){
super(props)
this.onPressButton = this.onPressButton.bind(this)
}
onPressButton(){
this.webview.injectJavascript(`alert('hello')`)
}
render() {
return (
<View style={{ height: '100%' }}>
<WebView
ref={ref => (this.webview = ref)}
javaScriptEnabled={true}
source={{ uri: 'https://google.com' }}
/>
<Button onPress={this.onPressButton} style={{ height: '10%' }} title="Test Javascript" />
</View>
);
}
}
Please don't recommend to use injectedJavascript because that is not my desired functionality.
Would appreciate any other approaches as well.
Upvotes: 1
Views: 2997
Reputation: 4641
According to react-native-webview, you need to use injectJavaScript
, not injectJavascript
. That'll fix your issue.
Also, there are few things that need to change
this.onPressButton = this.onPressButton.bind(this)
instead you can use an arrow function.javaScriptEnabled={true}
. It is already using default value as true
.true
. This is required, or you'll sometimes get silent failures.Check complete sample code
import React, { Component } from "react";
import { View, Button } from "react-native";
import { WebView } from "react-native-webview";
const script = `
alert('hello')
true;
`;
export default class App extends Component {
onPressButton = () => {
this.webview.injectJavaScript(script);
};
render() {
return (
<View style={{ flex: 1 }}>
<WebView
ref={ref => (this.webview = ref)}
source={{ uri: "https://google.com" }}
/>
<Button onPress={this.onPressButton} title="Test Javascript" />
</View>
);
}
}
Hope this helps you. Feel free for doubts.
Upvotes: 2