react native webview not working in android 10 or higher. It works fine in dev mode but shows just a white screen in production mode.
<WebView
ref={webView}
javaScriptEnabled
injectedJavaScript={initialJs}
source={{
uri: "http://www.example.com",
}}
onMessage={(event) => {
console.log(event);
}}
/>
This might have something to do with clearTextTraffic in your android manifest
<application
android:usesCleartextTraffic="true"
Related
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 am using React Native 0.63. I wanted to display images in a FlatList from my phone's device storage and was using <Image/> for the renderItem prop of FlatList.
Using the source prop, I added a uri key but I am still not able to see the images. The image tiles are being generated in the FlatList and I am able to see the thin scrollbar on the right when I try to scroll over the list.
This is what I am doing to display the image. (The uri used here is of an image which I got from the CameraRoll.getPhotos() API)
<Image
source={{ uri: 'file:///storage/emulated/0/Pictures/Twitter/20201019_160855.jpg'}}
style={{ height: 100, width: 100 }}
/>
I have made sure about the following:
Allowed READ_EXTERNAL_STORAGE and WRITE_EXTERNAL_STORAGE permissions for the application.
Added file:// prefix to the file.
Made sure source={{ uri: ... }} in <Image/> works for external links, tried using Google logo, random jpegs from the internet.
Another thing which I noticed is, I am using Samsung phone with Android 10 on my device where I am facing this issue. I tried running this on the Google Nexus 5 Android Emulator which also runs on Android 10 and works perfectly fine (By this, I mean I am able to access the emulator's device storage and not using the exact same uri specified above).
UPDATE: Tried compiling the application on Android 7, the above thing is working fine. Any issue with the the SDK Versions?
Are you getting a permission denied error?
This might be helpful:
https://github.com/react-native-image-picker/react-native-image-picker/issues/1259
Something to try adding:
android:requestLegacyExternalStorage="true"
... to the tag in your AndroidManifest.xml.
Warning:
From May 5 2021 onwards:
Play Store will not accept this implementation and remove all apps using it except if the app functionally really requires it and it needs to be requested.
The implementation will need to use Scoped Storage.
Are the images appearing on the emulator correctly?
If the issue is only on your device, you will want to check you've added
android.permission.READ_EXTERNAL_STORAGE to your AndroidManifest.xml and requested perission to use file storage
See: Usage - react-native CameraRoll
This can be helpful: https://github.com/react-native-image-picker/react-native-image-picker/issues/1259
In manifest
android:requestLegacyExternalStorage="true"
<application
android:name=".MainApplication"
android:label="#string/app_name"
android:icon="#mipmap/ic_launcher"
android:allowBackup="true"
android:theme="#style/AppTheme"
android:requestLegacyExternalStorage="true"
android:usesCleartextTraffic="true">
build.gradle
// camera
compileSdkVersion = 29
I Found Storage Permission wasn't working in the Samsung Phone
so i added following in the
android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
More Importantly This fixed my Issue :
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
then check for the Permission as regular and it will work
My Config for the React-native APP
"react": "18.1.0",
"react-native": "0.70.6",
buildToolsVersion = "31.0.0"
minSdkVersion = 22
compileSdkVersion = 33
targetSdkVersion = 33
This Worked in My case 👍👍
Happy Hacking 😂
im runing a simple react-native application in my android device (samsung 9, Android 9, API 28), so on debug mode it's work fine using this commande line :
react-native run-android
this is the result :
but in relase mode (react-native run-android --variant=release) , image not showing :
my simple code :
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Image source={ {uri:'http://i.imgur.com/GRIZj68.png'} } style={{width:200,height:200} } />
<Text>HOLA</Text>
</View>
);
}
}
any help please !
Android pie (9) doesn't allow non https images to be rendered, so you have to change your http requests to https or to set a networkSecurityConfig in your Manifest application tag like this:
<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
<application android:networkSecurityConfig="#xml/network_security_config">
</application>
</manifest>
Then in your xml folder you now have to create a file named network_security_config just like the way you have named it in the Manifest and from there the content of your file should be like this to enable all requests without encryptions:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
</network-security-config>
source: https://developer.android.com/training/articles/security-config
We were having crashes and issues in development with our icons not being written out and appearing like images_homeactive. This caused react-native-navigation to crash our app
This occurred when we upgraded to compileSDKVersion = 28.
Starting with Android 9 (API level 28), cleartext support is disabled by default
this prevents your application from connecting to the React Native packager. The changes below allow cleartext traffic in debug builds.
../app/src/main/AndroidManifest.xml
<application
...
android:usesCleartextTraffic="${isDebug}" tools:targetApi="28">
../android/app/build.gradle
buildTypes {
release {
...
manifestPlaceholders = [isDebug:false]
}
debug {
...
manifestPlaceholders = [isDebug:true]
}
}
So thankful to stumble upon Ahmed's answer.
Hope this helps someone.
Contents did showing up perfectly inside emulator and debug with real device but does not showing anything when testing out with real device (using released .apk). It just only showed blank container with white color. Or do i missed something?
<WebView
ref={(wView) => {this.wView = wView}}
javaScriptEnabled={true}
// onBridgeMessage={this.onBridgeMessage}
onMessage={this.onMessage}
injectedJavaScript="window.postMessage = String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');"
automaticallyAdjustContentInsets={false}
domStorageEnabled={true}
startInLoadingState={true}
source={mainHtml} <-- load with, var mainHtml = require('./MainHtml.html');
style={{width: 320,height:100,flex: 1}}/>
Environment
react-native-cli: 2.0.1
react-native: 0.43.4
react: 16.0.0-alpha.6
Device(ASUS Zenfone)
Android version 6.0.1
From what I've read here this is a known issue with Android when deploying in Release. The workaround is to point to the file with a uri:
{ uri: 'file:///pathto/file.html' }
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} />