I have a website that loads images from the internet, I thought I could easily make a React App that just shows the webpage as a Web View
The Web Page loads up perfectly fine, and I added a log that shows that it does load the image URL's correctly.
But the Images don't show on the Android app. I don't know how to debug React Native Apps Properly
On the Web Page the image are shown through a CSS property 'background-image: url(image url)'
And I update that property, maybe that's is the source of the issue
This is the Web Site, it's made for mobile devices really and is still a WIP
https://praw.herokuapp.com/
What I have tried:
I used Android Studio to debug the APK and LogCat shows 1 error everytime I try change the Image
E/StudioTransport: JVMTI error: 103(JVMTI_ERROR_ILLEGAL_ARGUMENT)
Doing some searching online JVMTI_ERROR_ILLEGAL_ARGUMENT is an error that is caused because "The supplied memory buffer is too small."
That makes me think, React allocated memory for my app, but once I loaded a new image it didn't have enough memory to display it? What do you think?
That is all the info I could find on the error... Android Studio did not give me any other helpful info
Is this a bug maybe with React Native WebView? Should I raise a GitHub Issue?
Is there any other info I could share that may help?
My Entire React Native Code 😅
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class App extends Component {
render() {
return (
<WebView source={{ uri: 'https://praw.herokuapp.com/' }}/>
);
}
}
export default App;
Try it with the View
<View style={{flex: 1, flexDirection: 'row'}}>
<WebView style = {{flex:1}} source={{ uri: 'https://praw.herokuapp.com/'}} />
</View>
or try to add <application android:largeHeap="true"> in android manifest
Fixed it, turns out http requests are a no no... I probably shouldn't do what I did, but I changed the image URLs from http to https...
You need secure URLs otherwise the image won't show up
The errors in LogCat are useless and had nothing to do with the error. I guessed this was the issue by reading the Java source code on Web Views. Going through that gave me some hints and it worked... yay I guess
Related
I have a background image in src/assets folder which I try to get access to from src/screens/splash/index.js as such:
import {ImageBackground} from 'react-native';
import React from 'react';
export default function SplashScreen() {
return (
<ImageBackground
source={require('../../assets/bg1.jpg')}
resizeMode={'cover'}
style={{flex: 1}}>
</ImageBackground>
);
}
Returns this error:
None of these files exist:
bg1.jpg
src\assets\bg1.jpg\index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
If i move the image in any other folder, for example screens and change source to:
source={require('../../screens/bg1.jpg')}
its working fine.
Im baffled and wondering the reason behind it?
Is it maybe because I use react-native cli and renamed the tsx file created originally to js?
Here is a picture in case it helps understanding the problem.
After trying everyting was suggested in the comments, nothing has worked so far. I went ahead and continue building the app (following a tutorial) and re-compiled the application, now on an other computer and it started working!
The only change that I made since added the assets folder and the image that following the documentation integration-with-android-fragment I added few extra lines to MainActivity.java as suggested.
import android.os.Bundle;
and
private Bundle getLaunchOptions(String message) {
Bundle initialProperties = new Bundle();
initialProperties.putString("message", message);
return initialProperties;
}
Now im not 100% sure this was the solution to the problem, but I assume it must have been as no other changes has been made to the code since the error message appeared..
That is also possible that on my other computer it still wouldnt work, so the error is rooted somewhere within how my computer handeled these packadges. Unfortunately Im unable to test this theory for the next 2 weeks, but will share it whatever it concludes.
Hy guys, I'm using react native cli. I'm using the webview.
import {WebView} from 'react-native-webview';
<WebView
ref={webViewRef}
source={{uri:uri}}
originWhitelist={['*']}
onNavigationStateChange={
(state)=>{
const back = state.canGoBack
const forward = state.canGoForward
setCanGoBack(back)
setCanGoForward(forward)
}
}
/>
Its working on some devices very perfectly but on some of old devices it displaying me this error:
Error Loading Page
Domain Undefined
Error Code: 3
Description SSL error: The certificate authority is not trusted
Does someone have an idea what's the problem there? I try to search error code 3 webview but can't get things to solve.
Try adding usesCleartextTraffic in project/android/src/AndroidManifest.xml
android:usesCleartextTraffic="true"
More details Here
So I have just started learning app development with React Native this past week and so I've been getting into using Android studio emulators to run my apps. I've noticed that when I run the apps on the emulator, it doesn't seem to refresh the code properly. For example I made this very simple app while following a tutorial:
import React from 'react';
import { Text, View, Platform } from 'react-native';
import {Button} from 'native-base';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Testing 12321</Text>
<Button><text>Hello World!</text></Button>
</View>
)
}
}
const styles = {
container: {
flex: 1,
marginTop: 24
}
}
But when I first created it, in the tutorial the instructor forgot to put the Text tag within the button, so when I ran the app I got an error of:
Text strings must be rendered within a <Text> component.
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4137:14 in <anonymous>
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4134:2 in createTextInstance
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15909:12 in completeWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
and it keeps going. Then in the tutorial the instructor noticed the mistake and fixed it by adding the tag in the button, but then when he does that, the app refreshed properly and displayed the button but for me I still get this same error. I've noticed this happening quite often with the Emulator, it doesnt like to refresh properly when opening a new app or altering one. I have deleted and recreated the emulator like 5 or more times now to test out different apps. Does anyone have a suggestion of how to fix this? Thanks in advance!
Change your <text> to <Text> as below.
<View style={styles.container}>
<Text>Testing 12321</Text>
<Button><Text>Hello World!</Text></Button>
</View>
Feel free for doubts.
I'm trying to load a image from users phone, crop it and then display. Im using the webview plugin to do that. It works as intended on android but not on IOS.
I've tried this from another question, which resloves to file not found error
itemSrc = itemSrc.replace(/^file:\/\//, '');
I also looked at NormalizeURL but that does not seem to work with Ionic 4
Heres some code
this.imagePicker.getPictures(options)
.then((results: string[]) => {
results.forEach(res => {
this.crop.crop(res, {quality: 50})
.then(
data =>{
//this is extracting the URL
this.user.photos.push(this.webview.convertFileSrc(data));
},
After that, the UI should display the cropped image, which it does on android, but not on IOS.
I used safari dev tools to inspect and this is the error:
[Error] Failed to load resource: unsupported URL (unsafe:ionic://localhost/_app_file_/Users/radmac/Library/Developer/CoreSimulator/Devices/8E6A6BFA-66FA-4DB3-B556-BCE9E2EFE33A/data/Containers/Data/Application/C39D8D99-0F67-4D33-9195-EE2B4D4E4707/tmp/cdv_photo_024.jpg, line 0)
So, I found the solution for this. Before that, You can read this blog post which is really helpful if you want to understand more about ionic native and images.
https://ionicframework.com/blog/storing-photos-with-the-cordova-camera-and-file-plugins/
the solution was to just wrap the webview converted src with dom sanitizer, like so,
const resolvedImg = this.webview.convertFileSrc(data);
this.user.photos.push(<string>this.sanitizer.bypassSecurityTrustUrl(resolvedImg));
Make sure to import the dom sanitizer.
import {DomSanitizer} from "#angular/platform-browser";
...
constructor(private sanitizer: DomSanitizer){
...
}
I am using the Image component to show an image from the web.
Problem :
If the image does not exist on the web, I would like to use a default
image. There is a defaultImage option but isn't supported on android.
Is there a solution for both android and ios?
I would like to avoid having to send another HTTP/HTTPS request to
test for a 404.
There is an onError prop on the tag that you could use to Handle '404'.
For exemple using the state:
<Image
source={this.state.thumbnail}
onError={(e) => {
console.log(e.nativeEvent.error);
this.setState({thumbnail: thumbnailDefaultImage});
}
}
/>
See here for the different props : http://facebook.github.io/react-native/docs/image.html#onError