I'm using an Image component (with an external source) in React Native on iOS and the image is disappearing when the app is resumed? - reactjs

To reiterate, I'm using React Native with iOS.
I'm using an Image component that has the source set to an external GIF image (from Giphy). This is working perfectly fine. However, when you press the home button on the device and then go back into the app to resume it, the image component is blank. The other text elements retain their data just fine.
Is there a way to keep the image set when the app is resumed? Or an event that happens when the app is resumed, so I can manually set the source again?

I have this issue too. It seems like a react native bug. I just using animation instead of gif to solve this issue.

Related

How to get shared screen in react js using Agora?

I am creating screen mirroring app using flutter and react js with Agora. The screen shared from flutter must be visible on react js. So far I have learned that screen shared does not come as videoTrack. I just want to know how it comes and how to show that on react js website?
P.s At flutter-end the screen capturing starts successfully.

How can I send a react component as an input to html2canvas and jsPdf?

I have a webpage I made in React. It renders some charts. The charts will appear slightly differently depending if the user is viewing the page on desktop or mobile.
I have used html2canvas and jsPDF to export the page to PDF. The problem is that I ALWAYS want to export the charts in the format seen in mobile view.
I have thought of the following:
rendering the mobile view inside a div with display set to none and using that div as the input to html2canvas. This does not work. I get an error.
Trying the above, but instead of using the hidden div, just send the div as the input to html2canvas inline. I do not know if you can even do this.
Using React-pdf to output the pdf. The problem here is that I do not know how to embed the charts when using react-pdf.
Does anyone have an idea of what I can try?
Thank you.

Adding navigation control to my google map

Im running react (in the web browser not native) with the react-google-maps component. I want to enable the navigation button (see the red marker) so the map can be opened in my native app. Any suggestions? See the 2 pictures
It doesnt seems like the google maps api has any controls out of the box. A workaround for me is to implement the directionsbutton and https://developers.google.com/maps/documentation/urls/guide from google. When the link opens it will open in the native app if its installed on anroid or ios

svg sprite load with webpack and react

Hi I am using svg sprite I created using icons8 website for all my website icons, and the icons are working but it seems that the website loads them more than once per page (if i open the network tab i can see it loaded twice or more). I have been looking for a solution for a while now and I cant seem to find the cause of this.
I work with react so I have a component for Icon which uses the tag with xlinkHref attribute.
did anyone encounter such behavior? if yes what would be the best way to approach a solution?

ReactJS project on Android WebView, Image not showing

I am currently experimenting on a hybrid app using ReactJS for my front-end loaded inside an Android WebView. On one of the pages, I have a list that loads an external/hosted image. Tapping on these images routes to another page that shows its description (using react-router. history=hashHistory).
Testing on the browser(chrome), the images appear once loaded. On the other hand, testing on the actual device, the images does not appear. Only when I tap the list item and press back (hashHistory.goBack) that it appears.
I know this is not the best use for ReactJS, but this is better than what we are currently using. Also, our current setup prevents us from pursuing the React Native way. Any ideas?
EDIT:
here's a screen cap:
You need to change your websettings in your code.
WebSettings settings = webView.getSettings();
settings.setDomStorageEnabled(true);

Resources