I would like to load a local html file in my React Native App. Its works in IOS but failed in Android. Here I my code:-
<WebView
originWhitelist={['*']}
source={Platform.OS === 'android' ? { uri: 'file:///android_asset/index.html' } : require('../screens/index.html')}
startInLoadingState={true}
/>
Here is my local html file path.
I have no idea where should I configure in order to get it works...Please help. Thank you.
Code is working. Remember to restart your react server everytime you change in android folder
Related
I am using react-native-video to play videos and it works well in React Native asset system. But in my case, I must to read the video from android asset folder.
Does anyone can help me?
Below are the paths I've tried, but unfortunately none of them work.
source={{ uri: 'file:///android_asset/test.mp4' }}
source={{ uri: 'asset:/test.mp4' }}
Related References：
Using file path in react-native-video
Path of Android asset folder
The same issue but he fix it by adjusting source code
Read the video from android raw folder but not my case
I have built an android app using react native. Inside the app I am using the
react-native-webview package to show a React app.
import {WebView} from 'react-native-webview';
<WebView
useWebKit={true}
source={{
uri: 'https://myappurl.com',
}}
style={{flex: 1}}
/>
I have set the android.permission.WRITE_EXTERNAL_STORAGE permission in andoid manifest and also set android.useAndroidX=true and android.enableJetifier=true in gradle properties. Yet when I copy something in the react app or download a file, it doesn't happend at the device level. If I run the react app independently in a web browser I am able to copy and download.
According to the documentation of react-native-webview nothing else needs to be done and this functionality should be inbuilt. What could be the issue?
Found the issue. For copy i was using the navigator.clipboard api and for download i was using a blob object. The web view only supports the document.execCommand() api for copy, and for download it only supports download through the Content-Disposition: attachment; header.
I'm building an Android application using React Native. It has a webview that reads an HTML file locally.
This is the piece of code I'm using to render webview.
<WebView ref="webview"
source={require('./helloworld.html')}
javaScriptEnabled style={styles.webView} />
This works well during development build. The HTML file loads on the webview and renders well.
But it doesn't on Android release/production build. The webview is empty and if I inspect using chrome://inspect, the webview is empty and doesn't load the HTML file.
From what I understand is the React Native fails to bundle helloworld.html as an asset during Android production build. I noticed that it works fine on iOS.
Any idea how to fix it?
As per the discussions around here https://github.com/facebook/react-native/issues/6004, it's a known defect. Assets are not bundled for Android production build but works fine in dev build.
A solution is store assets in Android assets folder manually, and then load the resource using
<WebView
source={{ uri: 'file:///android_asset/helloworld.html' }}
startInLoadingState={true} />
on RN 0.40,
require('./file.html')
is failing for me in Build release variant. It's fine in debug builds.
As workaround, I was able to put the file in android assets dir, and
{ uri: file:///android_asset/file.html }
load from there. Unfortunately for my situation, the html file loads remote third-party libs which internally reference protocol-agnostic resources: e.g., //domain.com/file.json. So those all got turned into file://domain.com/file.json links and of course failed.
I monkey patched XMLHttpRequest to change //... to https://... which solved that problem, but none of the images those libs attempt to load, will load. all broken. And I've been unable to find a way to determine what the requests look like for those images, to see why they break/fail-to-load.
on iOS production build this solution is work
<WebView
source={{ uri: 'helloworld.html' }}
startInLoadingState={true} />
I want to wrap a react based web app which gets build using webpack in a
cordova container for an Android device. I successfully built the
cordova app for iOS and everything worked fine. However, when building
for android, static resources like images and fonts that are required in
javascript using webpack's file-loader, aren't loaded correctly.
The web view tries to load all resources like an image from
file:///android_asset/www/build/myImage.png, but logs a file not found
error. If I link - for example - the same image directly in the
index.html via an image tag, the image is loaded correctly, but changing
the publicPath attribute in my webpack config file didn't work.
Any help is very much appreciated.
Thanks a lot in advance
My brute force solution:
Pre-React Build: add "homepage": "./", to app’s package.json.
Post-React Build, and Pre-Cordova Run Android: in www/static/js, find/replace “static/media” with “android_asset/www/static/media” for all image/pdf files in the main###.js file (not the .map file).
My solution was to add "homepage": "/android_asset/www/" to package.json, it works perfectly with dynamic paths,
I need to open a pdf in android mobile device.
For that ,I have add a 'test.pdf' pdf file in common folder and add plugin (Childbrowser ) in config.xml file (res/xml/config.xml). And again add childbrowser.js and cordova.js file in js folder .
And add a code to open a pdf file here---
window.open('./test.pdf','_system','location=yes');
But still exception is coming like that 'Target file is not available' andgive a path
file.///data/data/
I want to load that test.pdf file in the android mobile and open that particular file .
But it is not opening .
Please suggest me a solution. Thanks
Unfortunately, Android does not support viewing PDFs out of the box in a WebView. Most results point to using Google Docs.
Here are some suggestions:
Open PDF in a WebView
How to open local pdf file in webview in android?
http://developer.appcelerator.com/question/147570/open-remote-pdf-file-on-webview-in-android
This you could do by combining a Cordova plug-in and this native code: http://kylewbanks.com/blog/Loading-PDF-in-Android-WebView
http://asmncl.blogspot.co.il/2012/06/android-open-pdf-file-in-webview.html