ReactJS project on Android WebView, Image not showing - reactjs

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);

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.

ReactNative Pull To Refresh for iOS platform

All Dev, I am working on pull to refresh feature in my react native project. As we all know that react native itself providing a Refresh Control that we can us along with List and ScrollView but not with View 😉that's fine.
I notice that there’s no common gesture for refreshing the page data for both platform if we go with the Refresh Control because of fundamental different
After reading this articlehere:
For iOS, the Pull-to-Refresh embedded in as part of the list.
For Android, the Pull-to-Refresh is not part of the list, but on top
of it.
Now my question is there any way to implement the same gesture for refreshing on iOS platform either native side or react side. For android we have SwipeRefreshLayout but do we have any controller that help to achieve the same gesture in iOS platform?.
Below is the refresh image from android platform:(Gmail App)
Sorry in case of you can't understand the question. feel free to comment will update. Any suggestion and comments are welcome.
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?

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?

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.

Resources