Develop Reference

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

How to capture an animated View as video

I am using a react-native Image to show some images from some url on the web. Now, based on some condition I update the image urls in different interval.
I want to capture this whole transition into a video file. However, I cannot find a suitable android APIs (for native side) or react-native packages to achieve that.
I already did something similer to convert an android View into a Bitmap and then encode it into a jpeg image.
A basic example of what I already have is as follows:
componentDidMount() {
setInterval(() => {
this.setState({imgUrl: 'some new url' });
}, 2000);
}
render() {
return {
<View style={styles.mystyle}><Image source={this.state.imgUrl}><View>
}
}
Please help me out here. Thanks in advance.

This could help : https://github.com/ycswaves/react-native-screen-recorder
I've not tried this myself, just came across while doing a google search
Possible duplicate question : Is there any plugins for recording screen and voice in React Native with iOS

React Native Testing network images for a 404

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

locales/en-US/translation.json loads in Eclipse but fail in iphone

I am currently developing a cross platform mobile app using phonegap 2.5. When app starts it loads a json file for setting the app's language. It works perfectly in android but in ios it gets me that error: failed loading: locales/el-GR/translation.json. I tried to change the relative path for locales folder or move the current folder to other scope but neither seems to work.
WWW subfolder path
_www/
__index.html
__js/
___some js files like as main.js, cordova.js,jqmobi.min.js, i18next-1.7.1.min.js e.t.c.
__locales/
___en-US/
____translation.json
And the function i call in main.js:
i18n.init(
{
lng: AppSettings.Language.get(),
fallbackLng: 'en-US',
/* Where __lng__/__ns__.json = en-US/translation.json */
resGetPath : '/locales/__lng__/__ns__.json',
resPostPath: '/locales/__lng__/__ns__.json',
debug: true
},
function(){
}
);
In main.js i give the relative url path for loading translation.json (locales/en-US/translation.json). This works fine in android but in ios it doesn't seem to load it.
So, if you can, i could need some help.
Does iphone understand differently the relative paths of a phonegap mobile app?
What path should i give so that the app loads the translation.json?
If you need more info tell me.
Ty in advance.

Angular Js and Trigger.io - Can't follow a link on Android that works on iOS

I am using AngularJS with Trigger.io to develop a mobile application for both iOS and Android.
When I try to open a link that looks like this:
<a ng-href="#/offers/{{featured_offer.Id}}"></a>
It works perfectly fine on iOS, but on Android I get this message in the trigger console, and the link is not navigated to:
[WARNING] Attempted to open a URL which could not be handled: unsafe:content://io.trigger.forge722b6464a0e211e2ba9d12313d00dc45/src/index.html#/offers/8
How can I get this to work in Android the same as it works in iOS?

Looks like Angular adds unsafe: to url schemes it doesn't recognise, I think you want to include something like:
app.config(function($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content):/);
});
Which adds content: to the accepted url schemes.

I had this same problem, specifically with trying to display an img with a src of a file returned by forge.file.getImage. Angular adds unsafe: to the content: prefix of the local img URL, and as connorhd said, you need to add content: to the url whitelist.
Note that compileProvider's API has changed with recent versions of Angular, so I'm commenting here in case anyone else finds an updated version of this workaround useful.
app.config(['$compileProvider',
function($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content|blob):|data:image|/);
// note: you'll also have to do imgSrcSanitizationWhitelist if you want to use general links as well as ng-src on images.
}]);

I too had this problem just add sanitizer in you config.xml
var app = angular.module( 'myApp', [] )
.config( [
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}
]);