How reload image in react-native when fail - android

I want to consider all possible cases for loading an image.
My project allows the user to answer some questions based on some images. In ANDROID I have had problems in some occasions when these images are loaded. This causes a great negative impact, since the user has no idea what to answer.
Example code:
<Image
style={styles.imageBackground}
source={{ uri: obj.question }}/>
After many tests, it seems to fail for some strange reason. I have seen some topics about this here
Whatever the case (the above mentioned or simply in the process of loading the internet connection fails), I would like to be able to reload the images again.
It occurred to me to use onError event and put something there that would allow me to set the source for the second time
<Image
ref={'image' + key}
style={styles.imageBackground}
source={{ uri: obj.question }}
onError={(e) => {
this.refs['image' + key].setNativeProps({ src: [{ uri: obj.question }] })
}} />
The line inside the onError does not work for me. Even if it worked, there are some aspects that should be considered. For example, it could be causing an infinite loop and you would have to have a variable to control how many times the line would be in the onError line.
I would like to ask if this idea makes sense or if they have any other better.
PDTA:
1) Setting a defaultSource is not an option, as it would seriously affect the ux.
2) All images should load without problem, since they are previously stored in the server with fixed paths. This makes it very unlikely that images can not load. The only 2 shapes I can think of are the ones I mentioned above

Related

How to display an animated Gif in React Native

Before you link me to another question similar to this one, such as this or that. I will say that I have done exactly what the answers said, but my gif won't animate as it should (It is displayed though).
Here is what I've done in a function, which is displayed through the main App function Stack.Screen within a NavigationContainer and Stack.Navigator. (I'm using React Navigation to move across screens, the context here is that a button is pressed and it displays the contents of the DetailsScreen function)
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 2, alignItems: 'center', justifyContent: 'center' }}>
<Image source={require('./src/gif/moving.gif')} />
<Text>Here is a gif</Text>
</View>
);
}
This displays the first still image of my gif, but doesn't animate it.
I also already went ahead and placed the implementations in the build.gradle dependencies, but it didn't do anything for me. I have a feeling the problem lies there.
implementation 'com.facebook.fresco:fresco:1.+'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.+'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.+'
implementation 'com.facebook.fresco:webpsupport:1.+'
(I already checked fresco's new implementation version 2, but it still didn't help. I also tried changing from a specific version, still doesn't work)
I am using React Native version 0.67. (I tried starting it again while downgrading react-native to 0.66 and it still doesn't work.)
Also, not sure if this has to do with anything in this screenshot here, this is what I had by default and gave me this error message as soon as I opened the file, but the program launches just fine even with that on
Doing it normally in the main App() function starting first displays the gif, but still remains as a still image.
What should I do? I mean... what else can I do?
Edit:
I found the solution to the problem... it was a simple case of just cold booting the emulator I was using from android studio.
However, Tadej's answer is valid, as the view style aligning messes up the gif a bit. If you are having a similar problem and the answer doesn't help, try cold booting your emulator, or even reinstall a newer one... or alternatively, use a real android phone to test these sorts of things.
Anyway, thanks a lot for the help Tadej ! I hope this question has helped others in my situation.
Tadej Slemenšek
This worked for me. Setting height and width on Image prop did not show the gif. So I flexed it and added maxWidth and maxHeight.
const imageUrl = 'https://media.giphy.com/media/xT0xeCCINrlk96yc0w/giphy.gif';
const App = () => {
const { width } = useWindowDimensions();
return (
<View style={{flex: 1}}>
<Image style={{flex: 1, maxWidth: width, maxHeight: width}} source={{uri: imageUrl}}/>
</View>
);
};

Why does React Native Webview not load image from a URL

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

Failed to load certain images react native listview

In the application that I am creating I am using a listview which uses a Gamecard component. Inside this component we are using the Image component which gets images from an Azure blob storage. This works for most of the times but there are certain cases that this doesn't work.
When this occurs the onError event gets triggered but in the event I don't get any error returned so investigating the problem is pretty hard.
I am catching it like follows:
source={{uri: config.storage.endpoint + this.state.game._id + "/" + this.state.game._id + '-compr'}}
onError={(err) => {
console.log('Something happened!')
}}
I have tried reading the err object but nothing usefull coming out of this object.
The images are relatively small (with size and MB) so I am lost on where to search next.
Hope somebody can help me out.

JavaFX ScrollPane on Android - Too Slow

I have just coded a simple example of using a scrolling pane in JavaFX. Just one ScrollPane placed in the Scene, and the ScrollPane holds a Label component with a large text. Using gradle I have uploaded the app on a Nexus 4 android device. As you can see from the video I have uploaded, the scrolling is way too slow. I am sure others have experienced this. Any suggestion of how this can be changed to the native speed scroll is really much appreciated.
Source code of the app can be downloaded from here.
AndroidFX.java
public class AndroidFX extends Application{
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) throws Exception {
Parent mySearchListFXML = getFXMLPane("/fxml/ScrollPaneWithLabel.fxml");
primaryStage.setScene(new Scene(mySearchListFXML));
primaryStage.setWidth(Screen.getPrimary().getVisualBounds().getWidth()); primaryStage.setHeight(Screen.getPrimary().getVisualBounds().getHeight());
primaryStage.show();
}
public static Parent getFXMLPane(String url) throws IOException {
URL location = AndroidFX.class.getResource(url);
FXMLLoader fxmlLoader = new FXMLLoader();
fxmlLoader.setLocation(location);
Parent pane = fxmlLoader.load();
return pane;
}
}
ScrollPaneWithLabel.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<ScrollPane fx:id="scrollPane" fitToWidth="true" hbarPolicy="NEVER" pannable="true" style="-fx-background: white;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<content>
<Label text="<VERY LARGE TEXT HERE>" wrapText="true" />
</content>
</ScrollPane>
Faced similar issues. The problem is worse on hidpi devices, disabling the hipdpi setting in the properties file helps but you will have to do any scaling your self for hidpi screens.
Another thing that might help is caching the fonts. I believe the end result of a javafx ported application is more like a big image with hot spots. Scrolling I think is just telling the application to redraw the whole image every time. Just a theory really. Caching does help but can make your text look kinda fuzzy. Although I had some success in scaling the font large, setting the cache to true and then scale down, normally x2 and .5 gives pretty good results. Using em for the fonts helps the fuzzy text too.
If you need to show a huge amount of text and it must be scrolled, you will probably get much better results displaying it through a webview. I haven't ever really used it to be honest, but I would imagine that it is replaced when ported with the native browser window so performance should be pretty good I think. I guess it is possible they wrote a html renderer in javafx and then you would run into the same pitfalls.
http://www.gluonhq.com is offering something called the charm, down, and connect package that is supposed to mimic native apps. It sounds promising and I am currently trying to get more info to see if they have solutions to these types of issues. I will add to the post if I receive any more info about charm.

Images randomly break in PhoneGap/WebView on Android 4.4

I am experiencing a strange bug in PhoneGap on Android 4.4, for which I couldn't find any solution online. In my app, I am loading a lot of different images from a remote server, and as the user navigates back and forth, new images are loaded on each page (4 at a time, to be specific, through jQuery-generated html). After having navigated back and forth for a little while, some images will randomly not show up and instead show the typical "broken image" icon.
Now, here comes the strange part: I have been following the instructions at jQuery/JavaScript to replace broken images and done a few tests of my own. In conclusion, the naturalWidth and naturalHeight parameters report the right sizes of the images, and complete reports true for all images. Therefore, the solutions mentioned in the above SO thread don't work at all. Changing the image src doesn't help, either with or without a setTimeout (I tried adding the current timestamp as a parameter to the image path as well).
Did anyone else encounter this issue at all, or am I going crazy here? :)
EDIT: By the way, no error is ever reported. Therefore, no error handler is called when loading the image, making it useless to solve the problem with the already suggested methods (see the link above).
This is how i handle error images,
<img src="images/imageName.jpg" onError="onErrorFunc(this);" alt=" " />
function onErrorFunc(elem){
var imgUrl = "https://alternative-image";
elem.onerror = function (){
elem.src='images/noimage.jpg';
}
elem.src=imgUrl;
}
Hope it helps!

Categories

Resources