I am using React Native Webview but sometimes it can't load data perfectly, and sometimes it works fine. It works randomly. It only occur on IOS mobiles. I am using :
react-native-webview: 13.3.0,
react: 18.2.0
react-native: 0.72.3,
<WebView
source={{ uri: initialLink, headers }}
javaScriptEnabled={true}
ref={webViewRef}
mediaPlaybackRequiresUserAction={false}
//For the Cache
domStorageEnabled={true}
//View to show while loading the webpage
renderLoading={() => <ActivityIndicatorElement />}
onContentProcessDidTerminate={() => webViewRef.current.reload()}
//Want to show the view or not
startInLoadingState={true}
geolocationEnabled={true}
scalesPageToFit
allowsInlineMediaPlayback={true}
javaScriptEnabledAndroid={true}
allowFileAccess={true}
originWhitelist={['*']}
onError={() => setOnError(true)}
injectedJavaScript={INJECTED_JAVASCRIPT}
injectedJavaScriptBeforeContentLoaded={`
window.onerror = function(message, sourcefile, lineno, colno, error) {
// alert("Message: " + message + " - Source: " + sourcefile + " Line: " + lineno + ":" + colno);
return true;
};
true;
`}
onLoad={sendPlatformSpecsToWebView}
style={{ alignItems: 'center' }}
onMessage={event => { }}
limitsNavigationsToAppBoundDomains={true}
onShouldStartLoadWithRequest={event => {
const { url } = event;
if (url.startsWith('https://api.whatsapp.com/send/')) {
// Open WhatsApp externally
Linking.openURL(url);
return false; // Prevent the WebView from loading the URL
}
if (
url.endsWith('.xlsx') ||
url.endsWith('.csv') ||
url.endsWith('.zip')
) {
// Define headers to suggest a download
const headers = {
'Content-Disposition':
'attachment; filename="' +
url.substring(url.lastIndexOf('/') + 1) +
'"',
'Content-Type': 'application/octet-stream',
};
// Open the URL externally to trigger the download
Linking.openURL(url, { headers })
.then(() => {
// Handle success if needed
})
.catch(error => {
// Handle error if needed
});
return false; // Prevent the WebView from loading the URL
}
return true; // Load other URLs normally
}}
userAgent="Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1"
/>
Here is the issue link https://github.com/react-native-webview/react-native-webview/issues/3069
It load perfect but some time not. it only occur with the first page. It only occur on IOS mobiles.