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;
}}
/>
Related
I am new to React native and I am trying to open my webpages(page1,page2) inside webview using react native, and my component's webview in the below example.
Here page1 contains button on clicking that button, page2 is opening in child window in external browser.
Can somebody please tell me how to open page2 inside the webview, so that the user can get a good experience?
Example: Component 1
{
<WebView
scalesPageToFit
startInLoadingState={true}
renderLoading={() => { return <Loading/> }}
**source={{uri:"url to page1"}}**
onShouldStartLoadWithRequest={request => {
return request.url.startsWith(domain);
}}
style={styles.web}
javaScriptEnabledAndroid={true}
javaScriptEnabled={true}
originWhitelist={[domain+"*"]}
/>
}
I found the below solution but was not able to implement it in my scenario.
https://github.com/facebook/react-native/pull/6886
I found the answer, this happened because of the latest react-native-webview version.
setSupportMultipleWindows={true} becomes true and in my case, it should be false.
I am using Linking from React-Native. Linking.OpenUrl seems to work with most urls but it does not seem to work with urls which have non-english characters. See the example below in Expo where I have reproduced the case. Note that if you click on the url link directly it will open properly. However, when the same link is being opened via the Linking.OpenUrl it does something to the url and lands in a 404 page.
Here is a repro in Expo:
https://snack.expo.dev/#rezahok/linking-not-working
I am using Expo 42. Any help with this would be really appreciated.
Try with below code
export default class App extends Component {
render() {
const uri = `https://www.prothomalo.com/bangladesh/district/%E0%A6%A6%E0%A6%BF%E0%A6%A8%E0%A6%BE%E0%A6%9C%E0%A6%AA%E0%A7%81%E0%A6%B0%E0%A7%87-%E0%A6%B0%E0%A7%87%E0%A6%B2%E0%A6%95%E0%A7%8D%E0%A6%B0%E0%A6%B8%E0%A6%BF%E0%A6%82%E0%A7%9F%E0%A7%87-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF%E0%A6%97%E0%A6%A4-%E0%A6%97%E0%A6%BE%E0%A7%9C%E0%A6%BF%E0%A6%95%E0%A7%87-%E0%A6%9F%E0%A7%8D%E0%A6%B0%E0%A7%87%E0%A6%A8%E0%A7%87%E0%A6%B0-%E0%A6%A7%E0%A6%BE%E0%A6%95%E0%A7%8D%E0%A6%95%E0%A6%BE-%E0%A6%A8%E0%A6%BF%E0%A6%B9%E0%A6%A4-%E0%A7%A9`
const decodedUri = decodeURIComponent(uri);
return (
<View style={styles.container}>
<Button title="Click me" onPress={ ()=>{ Linking.openURL(decodedUri)}} />
</View>
);
}
}
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.
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);
}}