About injectScript in WebView for React-Native

Question

WebView loads a web page

I need to call the React-Native component method in the page

class Mwap extends Component {

constructor(props) {
    super(props);
    this.injectScript = `
        function setTitle(title){
            mwap.MyClick();
        }
    `;
}

componentDidMount(){
    window.mwap = this;
}

MyClick(){
    console.log('Call me');
}

render() {
    return (
        <View style={styles.container}>
            <MwapHeader
                goBack={this.goBack.bind(this)}
                closeWebView={this.closeWebView.bind(this)}
                toonShare={this.toonShare.bind(this)}
            />
            <View style={styles.line}/>
            <WebView
                ref={(ref) => {
                    this.webView = ref;
                }}
                automaticallyAdjustContentInsets={false}
                style={styles.webView}
                source={{uri: this.props.url}}
                injectedJavaScript={this.injectScript}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                decelerationRate="normal"
                startInLoadingState={true}
                scalesPageToFit={true}
            />
        </View>
    );
}
}

I injected a function with injectScript

This function calls a method of the Mwap component

I set the window.mwap = this;

But in the page, window.mwap is undefined

How do I call the React component method in a WebView loaded web page?

please help me

Thank you

Answer 1

The JavaScript code that you inject does not have any connection to your React Native JavaScript code. The mwap variable that you use in the injected JS does not have anything to do with that of your component. I'm afraid this behavior is not allowed. However, you can check this answer for an alternative, or the react-native-webview-bridge package.