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.
Related
I'm building an ionic application and I faced with an issue that affect only the Android devices.
I have some public images that I'd like to load like this:
<img src={imageurl} alt="" />
I'm using this plugin https://github.com/capacitor-community/http to make API calls, to avoid CORS issues. All the API calls are working on both platforms, but the images only works on iOS.
If I check the inspector this is the error message I get:
If I check the Android Studio logs I see these error messages: E/Capacitor: Unable to open asset URL:
If I'm using axios to make the API calls it works fine on Android but then it'll break on iOS due to CORS issues.
I was trying to separate the API calls and only use the native plugin on iOS but I don't think that is possible.. Android was able to make the calls with axios but response was always got response like this:
Android AndroidManifest is extended with this: android:usesCleartextTraffic="true"
webDir: "build",
bundledWebRuntime: false,
android: {
allowMixedContent: true
},
server: {
cleartext: true,
hostname: "baseurl.hu",
iosScheme: "localhost",
androidScheme: "https"
},
This is how I run the app:
ionic capacitor copy android
Android Studio run.
I have used several icons in the application, but they are not loading in iOS build, but load perfectly fine in Android build. The icons been used are PNG files in local assets folder. I have tried to use different methods to include Image files;
var chevron_right = require('./chevron-right.png');
import chevron_right from './chevron-right.png';
Third that I used was to put a JS file (i.e. Icons.js) in the folder where there the images are and than export those images from it. Like: export default { chevron_right : require('./chevron-right.png') } and then import where I want Like: import Icons from './path/to/icons' <Image source={Icons.chevron_right} style={{ height: 8, width: 8 }} />
All of the above three methods do not work for iOS builds. The screenshots are attached, the versions of expo and react native are:
Expo CLI: 0.60,
Expo SDK: 46,
React: 18,
React Native: 0.69.4
Screenshots:
The error seems to be with the Xcode. So pls Follow this
React-native iOS not showing images (pods issue). Read the full thread.
The question is answered.(Regards)
I updated my EAS CLI from 0.60 to 1.1.1, now my Images are rendering in iOS build.
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
I'm using cordova-plugin-mfilechose in my Ionic 4 application. It works fine till Android version 9. But in Android 10 whenever we trigger the plugin it just opens a window saying Internal storage but no file is listed, though there are many files inside the phone. I have used the same code as per the official documentation, added below. Thanks in advance.
window.plugins.mfilechooser.open(['.doc', '.xls', '.ppt'], function (uri) {
alert(uri);
}, function (error) {
alert(error);
});
The plugin looks like it is using standard Java File operations and paths to choose files, in Android 10 and above you cannot use file paths or Java File operations any more on anything but your App's private directory.
See https://developer.android.com/training/data-storage/files/external-scoped
Also not sure why you would use such a plugin as Android provides the functions natively with Storage Access FrameWork(SAF) or MediaStore
See https://developer.android.com/guide/topics/providers/document-provider#client
on how.
Everything can now only work with Java FileDescriptor
I found a workaround to my problem. Though it is not a solution in long run. In my Ionic 4 project project/config.xml android-targetSdkVersion was 29. I changed it to 28. Which works on Android 10 and also on all the lower versions. Below is the code.
<preference name="android-targetSdkVersion" value="28" />
I think all ionic plugins like cordova-plugin-camera and cordova-plugin-telerik-imagepicker needs to update to fully compatible with android 10 for scoped storage.
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} />