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
Related
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.
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
i am trying to use a random image generator for a demo app i am creating.
i have tried the endpoints:
http://thecatapi.com/api/images/get?format=src&type=gif&size=small
http://junglebiscuit.com/images/random/rand_image.pl
but when i add a list of images to my page with:
<View>
<Image
source={{ uri: 'http://thecatapi.com/api/images/get?format=src&type=gif&size=small' }}
style={{ width: 100, height: 100 }}
/>
<Image
source={{ uri: 'http://thecatapi.com/api/images/get?format=src&type=gif&size=small' }}
style={{ width: 100, height: 100 }}
/>
<Image
source={{ uri: 'http://thecatapi.com/api/images/get?format=src&type=gif&size=small' }}
style={{ width: 100, height: 100 }}
/>
</View>
the expectation is that for each Image component, a different image would be displayed. strangly, this does not work on Android. it seems that the image or url is being cached somewhere so when the image is rendered again with the same URI, the same image is displayed.
i have tried the same application on IOS (the app is created using react native expo.io). the image are different as expected on IOS, it it seems to be a problem specific to Android.
is there a way to prevent android from cacheing the image and display a different image every time the Image component is rendered?
In 2020 it`s still an issue in react native (as Dishant Walia mentioned). Now best solution from github is:
add a query string after url, works for both platform
<Image
style={styles.drawerAccountImg}
source={uri: this.state.photoURL + '?' + new Date()}
/>
Somehow you have to add random string to reload image with same uri. I have fixed the same issue by adding random string in image url.
Follow this comment for more information
React native image issue
I am using react-native-video package to get video player in which i can play my youtube videos.
I tried this but only a empty space was coming instead of a video player.
import Video from 'react-native-video';
<Video source={{uri: 'https://www.youtube.com/watch?v=Gh2FaDqZp2g'}}
ref={(ref) => {
this.player = ref
}}
onBuffer={this.onBuffer}
onEnd={this.onEnd}
onError={this.videoError}
style={styles.backgroundVideo} />
style:
backgroundVideo: {
height:300,
width:'100%',
}
I think Video tag will accept Uri ending with .mp4 format..
Please replace your uri with this http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4
(Note: Some other uri can also be used with same format) and checkout.
But for streaming Youtube videos you will have to use react-native-youtube and Youtube API Component.
Please refer this link for further
I see there some problems in your code:
1/ uri: please replace by this link: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4"
source={{uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}}
2/ Your style: as I remember width: '100% does not work, you should set it to a specific number. Or you can make video container view wraps the video view
<View style={styles.videoContainer}>
<Video
source={{uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}}
ref={(ref) => {
this._player = ref
}}
...
style={styles.video}/>
</View>
View style:
videoContainer: {
flex: 1,
backgroundColor: 'black',
},
video: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
Hope this can help you.
Video is not showing because of these conditions required by IOS and react-native
URL passed on uri must be "HTTPS" to run on ios because by default these are configured to https
To run HTTP Video file you need to make these changes on info.plist file as mentioned on below image from doc of the package
So add the following snippet in the ios/Project-Name/info.plist file under dict XML, This way you will opt out the App Transport Security by apple.
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
It is not recommended to opt out of App Transport Security since Apple plans to require App Transport Security starting 1 January 2017, But if you want you can
For more information refer to this article
https://cocoacasts.com/how-to-add-app-transport-security-exception-domains
If loading from local file system of project use require('path')
directly on source prop. Ex -
source={require('../../assets/videos/test_video.mp4')}
Hope this will help you or somebody else.
Thanks!
it's very clearly mentioned in library that you have to use .mp4 file, in my case .mp4 file url was also not working for android 10 and 11 so i have tried below solution and it worked for me.
still you can try this solution as it works for me try to change your react-native.config.js file with the following code
hope this will work for you
module.exports = {
dependencies: {
'react-native-video': {
platforms: {
android: {
sourceDir: '../node_modules/react-native-video/android-exoplayer',
},
},
},
},
};
In a local html file, that is displayed in a webview, I want to be able to call an image from the application data directory. I have tried several src options in my html, but none seem to work.
I am loading the html file from the application data directory successfully like this:
var win = Ti.UI.currentWindow;
var rootDir = Ti.Filesystem.getExternalStorageDirectory();
var webUrl = rootDir + 'index.html';
var webview = Ti.UI.createWebView({
width:'100%',
height:'100%',
url:webUrl
});
win.add(presWebView)
Although the page opens in the webview correctly, all the image urls are not functional.
<image src="appdata:///image.jpg"/>
<image src="app:///image.jpg"/>
<image src="file:///image.jpg"/>
<image src="appdata://image.jpg"/>
<image src="app://image.jpg"/>
<image src="app://image.jpg"/>
this problem also extends to links, no matter how I try to reference them the webview tells me the page does not exit.
I've solved it.
You must obtain ApplicationDataDirectory o ExternalStorageDirectory,
then with .nativePath property (of the file object) you can obtain your relative path dynamically.
var file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory(), 'test/1.html'); enter
mywebview = Ti.UI.createWebView({ backgroundColor: 'white', url: file.nativePath });
I have managed a partical solution which gets both the images and the links working correctly in my local html file by changing the webview url from an address based on its relative position to the externalstorage directory, to an absolute path:
var webUrl = "file:///mnt/sdcard/..."
var webview = Ti.UI.createWebView({
width:'100%',
height:'100%',
url:webUrl
});
win.add(presWebView);
As long as the url is an absolute path all the links in the html can be relative e.g.
Obviously it would be preferable to get the external storage directory dynamically, so if anyone knows a way to do this without breaking the links in the html I would be keen to hear.
In your Android directory /tools, there is a little program called DDMS. If you open that up, click on your emulator then in the top menu, click File Manager you can see all the paths that
"file://"
Can access..
So for example:
var imgPath = "file://mnt/sdcard/uk.co.yourappid/test.jpg";
I have just got this working in a WebView now:
Ti.App.addEventListener('snagr:plan:loadImage', function(e) {
$('#plan-image').css({
background: "url(" + e.path + ") top left no-repeat",
width: e.width,
height: e.height
});
});
Hope this helps!