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

Ionic 4 Loading Local resource not working on IOS

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){
...
}

React Native - Text Transform issue with Android Simulator

Is there a known issue with TextTransform:'uppercase' with Android?
I'm fairly new to React native and just finished building views, all looked great in Ios but on Android - no button text displaying. After a series of trial and error I found that the issue seems to be textTransform:'uppercase', if I remove this from the stylesheet the text displays fine.
Has anyone experienced this? I cant find any information about the bug on the web.
This is my Code:
return (
<View style={AppStyles.buttonRect} >
<View style={AppStyles.buttonRectWrap}>
<Image style={AppStyles.buttonRectIcon} source={this.props.buttonIcon} />
<Text style={AppStyles.btnText}>{this.props.buttonTxt}</Text>
</View >
</View>
);
with a style of :
btnText:{
color:'#fff',
marginRight:14,
marginLeft:10,
fontSize:20,
alignSelf: 'center',
marginTop:-3,
textTransform:'uppercase',
},
which results in -
If I remove the transform line:
I've tried with several simulators and get the same error.

This is currently a bug with React Native. A fix appears to be in 0.59.0 release, since the 0.59.0 release candidates don't contain the bug. Source: https://github.com/facebook/react-native/issues/21966

There is a known issue. Basically using textTransform breaks text styling for android. Even textTransform: none will break your styling. Issue link: https://github.com/facebook/react-native/issues/21966

I'm facing the same issue with react native version 0.58.5, this seems to be a well known bug. Try using normal JS to capitalize strings for now:
capitalizeString = (text: string) => typeof text === 'string' && text.length > 0 && ${text[0].toUpperCase()}${text.slice(1)}
capitalizeString('mystring')
or just:
string.toUpperCase();
ref: https://github.com/facebook/react-native/issues/21966

The workaround this issue I found was to create a component that renders the props.children and chain the .toUpperCase method.
react-native text-transform uppercase

React native + Appium, how to find an element

I'm trying (for too long...) to get appium working with react native, but can't seem to find any element.
I'm using an emulator, Nexus 6, android 6.0, ubuntu, appium 1.6.0, RN 0.39.2.
I'm trying to get the most basic example to work:
// foo.js
render () {
return (
<Text>foo</Text>
)
}
// spec.js
// ... some setup ...
driver
.elementByAccessibilityId('foo')
.click()
and I'm getting...
1) should be able to find 'Buttons' and click it
0 passing (13s)
1 failing
1) Android find and click should be able to find 'Buttons' and click it:
Error: [elementByAccessibilityId("foo")] Error response status: 7, , NoSuchElement - An element could not be located on the page using the given search parameters. Selenium error: An element could not be located on the page using the given search parameters.
I also tried setting:
<Text accessible accessibilityLabel={ 'foo' }>foo</Text>
same response ...
any ideas?

I ended up using this solution:
<Text accessibilityLabel={ 'FOO' } testID={ 'FOO' }>some stuff here</Text>
and then in the test:
driver
.elementByAccessibilityId('FOO')
Credit goes to #jonesdar for pointing that out here

Redux page breaks in Android WebView in Kitkat

I am rendering my Redux app like so -
<Provider store={store}>
<MyComponent />
</Provider>
the compiled code is
ReactDOM.render(React.createElement(
_reactRedux.Provider,
{ store: store },
React.createElement(MyComponent, null)
), document.getElementById(element_id));
This throws the error Uncaught Error: Invariant Violation: onlyChild must be passed a children with exactly one child. The development version of React also throws the following warning Warning: Failed propType: Invalid prop 'children' supplied to 'Provider', expected a single ReactElement.
If I change it to simply
<div>"Content"</div>
the compiled code comes out as
ReactDOM.render(React.createElement(
'div',
null,
'"Content"'
), document.getElementById(element_id));
and it renders properly.
The Provider version loads fine in desktop chrome as well as the chrome browser on the device.
Any pointers?

It has to do something with babel polyfill. If i remove the polyfill from the build process and use a CDN like polyfill.io using the tag
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
Then the problem is fixed and webpage loads. Still have to figure out why this happens though.