Prevent Reload in React Native WebView - reactjs

Question

I'm running a separate web app inside a WebView component, within a React Native app, and I'm trying to get them communicating properly.
React Native to WebView works fine. I can call webView.postMessage(...) and receive it in document.addEventListener("message", ...) without any problems.
However, when I try to go the other way (WebView to Native) the call to window.postMessage triggers a url change via window.location which seems to reload the entire WebView, and breaks the routing solution inside it.
The react-native-community/react-native-webview component seems to have the same problem.
Is there any way to message the native app from inside a web view without changing the URL or causing a page reload?

Answer 1

You can use onShouldStartLoadWithRequest props for IOS Example:-
import React, {Component, useCallback} from 'react';
import {
BackHandler,
Platform,
SafeAreaView,
ActivityIndicator,
StyleSheet,
Dimensions,
Linking,
} from 'react-native';
import {WebView} from 'react-native-webview';
import Spinner from 'react-native-loading-spinner-overlay';
class SupportPayWebView extends Component {
constructor(props) {
super(props);
}
webView = {
canGoBack: false,
ref: null,
};
loader = {
show: true,
};
onAndroidBackPress = () => {
if (this.webView.canGoBack && this.webView.ref) {
this.webView.ref.goBack();
return true;
}
return false;
};
componentWillMount() {
if (Platform.OS === 'android') {
BackHandler.addEventListener(
'hardwareBackPress',
this.onAndroidBackPress,
);
} else {
BackHandler.addEventListener('hardwareBackPress', this.backHandler);
}
}
componentWillUnmount() {
if (Platform.OS === 'android') {
BackHandler.removeEventListener('hardwareBackPress');
} else {
BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
}
}
backHandler = () => {
this.webView.ref.goBack();
return true;
};
ActivityIndicatorLoadingView() {
return (
<ActivityIndicator
color="#009688"
size="large"
style={styles.ActivityIndicatorStyle}
/>
);
}
onShouldStartLoadWithRequest = (navigator) => {
this.webView.ref.stopLoading();
return false;
};
render() {
return (
<>
<WebView
style={styles.WebViewStyle}
onLoadEnd={() => {
this.loader.show = false;
}}
injectedJavaScript={
"const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); "
}
scalesPageToFit={true}
automaticallyAdjustContentInsets={true}
scrollEnabled={true}
javaScriptEnabled={true}
domStorageEnabled={true}
renderLoading={this.ActivityIndicatorLoadingView}
startInLoadingState={true}
bounces={false}
source={{uri: '}}
ref={(webView) => {
this.webView.ref = webView;
}}
onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
sharedCookiesEnabled={true}
// scalesPageToFit={false}
javaScriptEnabledAndroid={true}
userAgent="Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36"
// decelerationRate="normal"
/>
</>
// </SafeAreaView>
);
}
}
const styles = StyleSheet.create({
WebViewStyle: {
justifyContent: 'center',
alignItems: 'center',
marginTop: Platform.OS === 'ios' ? 35 : 0,
width: '100%',
height: '100%',
resizeMode: 'cover',
flex: 1,
},
ActivityIndicatorStyle: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
},
});