react native android webview issue, pdf/docx/xlsx is not loading - android

Tried with multiple prefix urls: (FINAL_URL = PREFIX_URL+DOCUMENT_URL)
Prefix urls:
https://drive.google.com/viewerng/viewer?embedded=true&url=
https://docs.google.com/viewer?url=
I used react-native-webview for this
<WebView
source={{
uri: `${PREFIX_URL}${attachmentUrl}`
}}
javaScriptEnabled={true}
cacheEnabled={false}
startInLoadingState={true}
/>


Did you share the document with a setting allowing anyone with a link to view it? It might be that you simply have to be logged into google drive to view it.
You can test it by opening the URL in an incognito tab

Related

React Native WebView only display PDF file in Android

I'm trying to display a pdf file inside a WebView WITHOUT download it (because some security reasons). I'm using react-native-webview.
In iOS, the PDF file is displaying without any problem. But in Android, when navigate to the screen with the webview, starts a download of the pdf file and, is not displayed on the screen.
There is a way to display directly the pdf file on the screen in the case of Android?
Here is my current code:
<WebView
style={styles.webView}
startInLoadingState
renderLoading={() => <LoadingIndicator />}
source={{ uri: document.url }}
/>
Thanks a lot in advance.

React Native Webview - Opening same URL even after updating via state

I'm facing issue react-native-webview . The issue is like opening app initial I have set URL in state but when the new URL comes up from push notification then its not updating the webview even after updating the state.
Please help me if any one has the solution for the same.

Define a reference for webview like given below and call
webViewRef.reload(), when you want to reload the webview
<WebView
ref={(ref) => {
this.webViewRef = ref
}}
/>

try this way, by adding a timestamp to URL
this.setState({
url: DEFAULT_URL + '?t='+ Date.now()
});

React-Native Webview html file doesn't show when offline

I'm creating an app using React-Native. I'm using Webview in order to display a local html file in the app. This works perfectly when the phone has internet connection, but otherwise nothing is shown. Is it possible to have Webview display a local HTML file without internet connection?
Webview code:
WebView
source={{ uri: 'file:///android_asset/test.html' }}
/>

Try -
const debugSource = require('../assets/test.html'); // required for bundling
const releaseSourcePrefix = Platform.OS === 'android' ? 'file:///android_asset' : './assets';
const releaseSource = { uri: `${releaseSourcePrefix}/assets/index.html` };
const webViewSource = Image.resolveAssetSource(global.__DEV__ ? debugSource : releaseSource);
<WebView
scalesPageToFit={false}
source={webViewSource}
originWhitelist={["*"]}
style={{ flex: 1, }}
/>
Make sure you start with printing Text in HTML first to make sure there is no issue in the HTML file. It will help you to debug faster

WebView open apps/default browser

I am quite new to React-native. The href tag in HTML opens the website within the app. I wish to have it open the link in the default browser of the mobile phone/device. Oh and I use snack.expo.
In APP a website is being loaded. Within my website I use <a href> 'http://maps.google.com/?q=...' I wish to have the default browser of a mobile phone to open this link in its default browser, same goes for other href links.
Of course only links with target="_blank" should be opened in the default browser.
It would be even more awesome if app's can be opened.
I have searched google a lot, but without success.
Anyone who knows how to do this? Or is it simply not available, yet?
Within my HTML code I've tried this:
{address}
Part of react native code:
return (
<WebView
source={{ uri: '{website}' }}
/>
);
Best regards

It is definitely possible in react native. You can do it as follows:
import {Linking} from "react-native"
<WebView
source={{uri:"https://mashupguide.net/1.0/html/ch02s05.xhtml"}}
onShouldStartLoadWithRequest={request => {
let url = request.url;
if (url.includes("http://maps.google.com/")) {
Linking.openURL(url);
return false
} else {
return true
}
}}
/>
This will prevent the WebView from browsing to the next page and instead open the phone's default browser.
reference: https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#onshouldstartloadwithrequest
working example: https://snack.expo.io/#ammarahmed/sadistic-almond

Unable to play video in react native(for android) using youtube video url

This is my code below:
<View style={{height:250}}>
<WebView
style={ styles.WebViewContainer }
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: 'https://www.youtube.com/embed/BE1WzycXP10' }}
/>
</View>
When the external player opens and I press the BACK button - application closes without errors. I think that the new intent creates in the same activity.So my question: Is there any way to open video links with external player (like share works but user need to select from video players installed on the system to open shared link with the selected one)

Categories

Resources