I'm trying to download file from a web view. I have used javascript inject to click on submit button.
I'm specifically trying this for offline aadhaar - https://resident.uidai.gov.in/offline-kyc
Reference Code -
<WebView
source={{ uri: "https://resident.uidai.gov.in/offline-kyc" }}
ref={webviewRef}
renderLoading={LoadingIndicatorView}
startInLoadingState={true}
injectedJavaScript={runFirst}
onMessage={onMessage}
renderError={loadError}
// onFileDownload={({ nativeEvent: { downloadUrl } }) => {
// console.log(downloadUrl);
// }}
/>
I have tried with api request by creating/replicating the browser behaviour for api call but it's not working. Any suggestions.
You can try react-native-fs
You can use downloadFile API to download and save the file to the device.
Related
I'm working on a react-native app using WebView.
Here's the code of web view:
<WebView
ref={webView}
onLoad={onLoad}
onMessage={() => {}}
originWhitelist={["*"]}
source={{ uri: PLATFORM_URL }}
onNavigationStateChange={onNavigationStateChange}
/>
I'd like to prevent the web-view from opening browser when some buttons are clicked.
In particular, I'm struggling on a with target blank, and in iOS it actually redirect inside the webview, but on Android it opens the browser.
I've found one possible solution, that consist on injecting javascript code that is able to remove all target-blank s.
Is this the only solution? or is there a way to intercept that the webview is going to open the web browser?
Thank you
I hope this helps although it is late. Try using props onShouldStartLoadWithRequest like this
<WebView
source={{uri:'https://stackoverflow.com/'}}
onShouldStartLoadWithRequest={request => {
if (request.url.includes('https')) {
return false;
} else return true;
}}
/>
I'm working with react-native-webview to show an external site in my app, but the following warning message is showing each time the webview is loaded.
The code of the component is not complex, just <WebView source={{ uri: 'example.com' }} />
I couldn't find any reference to this. Does anyone know what can I do to remove the message?
Edit: After some tests, the webview only shows the message when it loads our website public pages, with other urls it works fine. Can it be any configuration in our site that I'm missing?
I have created a very minimal expo project with react-native-webview (v11.17.1) and it's working absolutely fine.
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView source={{ uri: 'https://reactnative.dev/' }} />
);
}
Working screenshot: here
We are opening a Url (in WebView) which has a button that dynamically generates and downloads a file (e.g. PDF or Excel or any other type) based on user selected filters. This means that we do not have direct link to those files which can be downloaded using network request. In chrome, we can see downloaded file. However in WebView, we neither see download file (the way chrome shows at the bottom of window) nor we get any way to intercept/view the location where it is downloaded silently. Below is webview:
<WebView
ref={ref => (webview = ref)}
originWhitelist={['*']}
source={{ uri: pageURL }}
javaScriptEnabled={true}
startInLoadingState={true}
scalesPageToFit={true}
domStorageEnabled={true}
onError={(err) => console.log(err)}
onHttpError={(err) => console.log(err)}
allowFileAccess={true}
allowFileAccessFromFileURLs={true}
allowUniversalAccessFromFileURLs={true}
allowingReadAccessToURL={true}
mixedContentMode="always"
onFileDownload={({ nativeEvent }) => {
const { downloadUrl } = nativeEvent;
console.log(downloadUrl);
}}
onNavigationStateChange={handleWebViewNavigationStateChange}
onLoad={() => {
webview.injectJavaScript(jsCode);
}}
onMessage={event => {
const { data } = event.nativeEvent;
}}
/>
So, we have below queries:
How to know if WebView actually downloaded a file?
Is there a way to know where WebView downloads a file?
Is there a way to specify default location where WebView should download a file?
Environment:
Expo: 40.0.0,
React-native: 0.63,
react-native-webview: 11.0.0
We clicked on "Allow" when it asked for permission to download and store file on device. Also, onNavigationStateChange is not firing when button is clicked (may be because the file is downloaded on same page without navigating). We have onError and onHttpError which does not print anything so there does not seem to be any issue there.
Below is the code (C#) that gets executed when button is clicked to download file:
string attachment = "attachment; filename=temp.csv";
HttpContext.Current.Response.Clear();
HttpContext.Current.Response.ClearHeaders();
HttpContext.Current.Response.ClearContent();
HttpContext.Current.Response.AddHeader("content-disposition", attachment);
HttpContext.Current.Response.ContentType = "text/csv";
HttpContext.Current.Response.AddHeader("Pragma", "public");
// Prepare file content
HttpContext.Current.Response.Write(fileContent.ToString());
HttpContext.Current.Response.Flush();
HttpContext.Current.Response.Close();
How to pass the params from react native webview to external javascript function,
I have app.js file which is added in my react native project, and it contain some function like callfromapp(data), and i need to pass the parameter from react native webview to app.js function.
iam adding function injectJSFileFromWeb() inside webview.js iam giving the app.js file path but when it calls app.js file, iam getting error like document is not defined,
inside react native webview.js,
<WebView
ref={ref => (this.webview = ref)}
source={{ uri: 'example/index.html' }}
originWhitelist={["*"]}
domStorageEnabled={true}
startInLoadingState={true}
allowFileAccess={true}
javaScriptEnabled={true}
onLoad={()=>injectJSFileFromWeb()}
/>
injectJSFileFromWeb() {
//give the filename according to your need
var jsFileName = require('../../../ios/build/../example/app');
}
The WebView has attribute onMessage, which can receive messages from WebView. See example in official API documentation https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#the-windowreactnativewebviewpostmessage-method-and-onmessage-prop
it is possible to handle URL change on React Native web view.
I try to handle with onNavigationStateChange listener. But it only once time firing. When the page is load firing onNavigationStateChange. And when I navigate to another page, this event not firing.
Any idea?
With the reference to import { WebView } from 'react-native-webview' you may be using old version of webview please try updating or try following code/method to get current navigation path/url.
In your case onNavigationStateChange is not returning navigated path so you can try using onLoadProgress which return every change in url.
Instead of this
onNavigationStateChange={(state) => {
console.log("current_path",path);
}}
try this
This may get called multiple time please handle your condition accordingly.
onLoadProgress={({ path}) => {
console.log("current_path",path);
}}
This is how my WebView looks like
<WebView
source={{ uri: this.state.url }}
onLoadEnd={() => this.hideSpinner()}
onMessage={onMessage.bind(this)}
ref={WEBVIEW_REF => (this.WebViewRef = WEBVIEW_REF)}
startInLoadingState={true}
javaScriptEnabled={true}
domStorageEnabled={true}
onLoadProgress={({ nativeEvent }) => {
//your code goes here
}}
onNavigationStateChange={(state) => {
//your code goes here
}}
/>
Try upgrading your React Native (and React) version.
It should be fixed. Maybe was an old issue, because right now it's working OK.
Check this link: React Native webview get url
onNavigationStateChange={({ url, canGoBack }) => {
console.log("url>>>>>>>>",url);
}}
I load website link in react native WebView and its has button when i click that it navigate to default mobile browser.
Running application in react native android Current scenario: when i click button in website its navigate to default browser and am not getting the url i tried above suggestions.
Expected scenario: When i click that button in website it should not navigate to default browser and i want that url which is opened in default browser.
my react version: "react-native": "0.64.0",
onLoadProgress = {({ nativeEvent }) => {
//your code goes here
}}
onNavigationStateChange={navState => {
console.log("navState ", navState);
}}