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
Related
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
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.
Actually I have a webview in react native and I am trying to open a url from that webview.Once the URL is loaded on pressing the bacǩ buttton it should navigate to previous page.How to navigate back to the webview page?
You can use reference of Webview and call goBack on that reference
<WebView
ref={ref => {
if (!ref) {
return;
}
this.webview = ref;
}}
/>
this.webview.goBack();
There's an option that you can try with is to have your webView inside a Modal that way you can control onBackPress.
I want to turn this section of code into a reusable component so I don't have to write the same thing out 5 times.
<TouchableOpacity onPress={console.log('pressed')}>
<Image
source={require('../img/button_australia.png')}
/>
</TouchableOpacity>
The new component I made to mirror this is as follows:
import React from 'react';
import { Image, TouchableOpacity } from 'react-native';
const ImgButton = ({ onPress, img }) => {
return (
<TouchableOpacity onPress={onPress}>
<Image
source={require(img)}
/>
</TouchableOpacity>
);
};
export { ImgButton };
After importing this component ImgButton I call it with this block of code:
<ImgButton
onPress={console.log("pressed")}
img={'../img/button_australia.png'}
/>
I get the error: "Requiring unknown module '../img/button_australia.png'"
I assume I've gone wrong when passing the string down as a prop but from the examples I've looked I don't see what's wrong with what I've done. Thanks :)
As discussed in this react-native issue, it's not possible to require assets or javascript modules with dynamically generated names, e.g. variables.
This is because the React Native packager uses require (and import) statements to generate the module and asset bundles at compile-time, so the value of the variable is not known.
The simplest way is to just pass the image source to the component directly:
<ImgButton
onPress={console.log("pressed")}
img={require('../img/button_australia.png')}
/>
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);
}}