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.
Related
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
We are using draftJS for creating a rich text post/comment with user mention(draft-js-mention-plugin), and hashtag(draft-js-hashtag-plugin) functionality. Following is the code sample.
<FieldContainer
containerStyles={this.props.containerStyles}
editorStyles={this.props.editorStyles}
placeholderStyles={this.props.placeholderStyles}
height={this.props.height}
onClick={this.focus}
>
<Editor
editorState={this.props.editorState}
onChange={this.onChange}
plugins={this.plugins}
placeholder={this.props.placeholder}
ref={element => { this.editor = element;} }
onfocus={this.props.handleFocus}
onBlur={this.props.handleBlur}
handleKeyCommand={this.handleKeyCommand}
keyBindingFn={e => myKeyBindingFn(e, this.props.allowNewLine)}
readOnly={this.props.readOnly}
autoCapitalize={'none'}
autoComplete={'off'}
autoCorrect={'off'}
spellCheck={false}
/>
</PostFieldContainer>
This is working fine in desktop web browsers. Now we are trying to support mobile platform as well. We are facing following two issues in android chrome:
whenever I type space after a word, the keyboard is getting closed.
clearing a mention or tag completely breaks down our app with following error
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node
at removeChild (https://192.168.1.9:3000/static/js/1.chunk.js:253583:22)
at unmountHostComponents (https://192.168.1.9:3000/static/js/1.chunk.js:264847:13)
at commitDeletion (https://192.168.1.9:3000/static/js/1.chunk.js:264915:9)
at commitMutationEffects (https://192.168.1.9:3000/static/js/1.chunk.js:267143:15)
.....
The above error occurred in one of your React components:
in div (created by DraftEditorBlock)
in DraftEditorBlock (created by DraftEditorContents)
in div (created by DraftEditorContents)
in div (created by DraftEditorContents)
in DraftEditorContents (created by DraftEditor)
in div (created by DraftEditor)
in div (created by DraftEditor)
in div (created by DraftEditor)
in DraftEditor (created by PluginEditor)
in PluginEditor (at PostField/index.js:363)
....
Any help or guidance is appreciated.
Tested it using android chrome and google keyboard.
LikeView has no propType for native prop RCTFBLikeView.onLayout of native type boolean
If you haven't changed this prop yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.
Not sure why I am getting this error. I'm not using LikeView at all in the android app. I've tried running npm start --reset-cache.
Also iOS version of the app runs no problem. This only occurs for android.
Any suggestions welcomed.
Thanks!
I figured out that the problem is (as RN points out) a mismatch between the native props and the JS ones on the props that every view uses. Namely:
renderToHardwareTextureAndroid
onLayout
accessibilityLiveRegion
accessibilityComponentType
importantForAccessibility
accessibilityLabel
testID
Since I am not using any of the views that the package uses, namely:
FBLikeView
FBLoginButton
FBSendButton
FBShareButton
I tried to set this props as 'native only', so that they are not bound to the JavaScript side. In every component (in the example, FBShareButton.js), I replaced:
const RCTFBShareButton = requireNativeComponent(
'RCTFBShareButton',
ShareButton,
);
with
const RCTFBShareButton = requireNativeComponent(
'RCTFBShareButton',
ShareButton,
{
nativeOnly: {
onChange: true,
onLayout: true,
testID: true,
importantForAccessibility: true,
accessibilityLiveRegion: true,
accessibilityComponentType: true,
accessibilityLabel: true,
renderToHardwareTextureAndroid: true,
}
},
);
I am now going to check if the views are getting rendered properly and edit my post later, but if you just want to be able to compile your app in order to continue development (as it is my case at the moment), that should let you do so.
Edit
I successfully rendered the LoginButton component using the example in the README with my changes.
Edit 2
I made a pull request with my changes to the package. I don't like the solution, but it might raise FB's attention. In the meantime, you can just use my fork. In your package.json, just replace the fbsdk line with this:
"react-native-fbsdk": "git+https://github.com/motius/react-native-fbsdk.git#fix-views"
This other pull request might be a better solution, actually.
Similar to the solution suggested by #martinarroyo, I figured that it has to do with some components that are not synced between the native code and the js code.
If you are not using these components, instead of adding the nativeOnly property in every js file you use it, I commented out the exports from the react-native-fbsdk index.js as follows:
//native components
// exports.LikeView = require('./FBLikeView');
// exports.LoginButton = require('./FBLoginButton');
// exports.SendButton = require('./FBSendButton');
// exports.ShareButton = require('./FBShareButton');
Obviously this is just a workaround but that should get you through that error
You can downgrade react-native-fbsdk to 0.5.1 to avoid this issue until a fix has been merged into a new version.
So after countless experimentation and banging my head on the table, i think the solution was the versioning of the dependency.
Here's a list of things I attempted and the one I think that resolved the issue is marked with an * because I'm not 100% sure if it was this step that resolved it.
removing node_modules folder and reinstalling it.
doing the react-native-git-upgrade as #matt suggested
reinstalled react-native-fbsdk multiple times following the instructions and double checking the code.
changing the buildToolsVersion & targetSdkVersion to 25.
5**. ultimately running react-native uninstall react-native-fbsdk followed by react-native install react-native-fbsdk#0.5.0.
Note* number 5 was attempted throughout the past two days..yet only now it worked...So I don't know what black magic it is that caused it to work just now...
The issue with number 5 is that prior to yesterday the fbsdk dependency version was 0.5.0 and as of yesterday, it was upgraded to 0.6.0. SO I am not sure why even though I reinstalled it yesterday too, it did not fix the bug.
If someone who is more familiar with this can provide an explanation as to why this occurred I would be inclined to learn.
I am using the Ionic Framework to build a mobile app for Android/iOS. I was able
to build the project for android (ionic build android). When I run the app, it will be only a white screen, that's because there is an error (when you use GapDebug, you can run apps on your phone and you will be able to debug, and see errors). Now if I run it on the desktop browser there really is NO error and everything is working. Below is the error that is shown in GapDebug:
Now when you check the code in service.js line 394:
There's nothing wrong with the code right? If I try to change line 394 to something like key : self.currentUser, there will be NO error and the app will work. What seems to be the problem here?
Not sure why you are making an object's attribute a list? If you want the key to be childQuestionSnapshot.key then remove the square brackets.
If you are trying to update a list of objects, you can do something similar to the below:
var test = [{key: 'thisguy'},{key: 'thatguy'},{key: 'myguy'}]
test.forEach(function(item){
item['key']='newguy'
})
console.log(test)
Do this instead
var updateObj = {};
updateObj[childQuestionSnapshot.key] = self.currentUser;
applicantRef.update(updateObj, function() {
console.log("applicant answers updated");
});
I am working on the migration of a JavaScript app from Sencha Touch 1.x to Sencha Touch 2.x. It is designated to run in a WebView inside a native Android app. The app worked on Sencha Touch 1.x. Meanwhile there has been a lot of refactoring and debugging to make it run on Sencha Touch 2.x. The current Sencha Touch version being used is 2.4.2.
I did some testing in a desktop version of Firefox. It basically worked out, but testing is limited since the Sencha Touch app is highly dependent on several objects and methods provided by the native Android app via JS-interface.
Now, when it comes to running it inside the Android WebView I am facing a strange issue: After startup and rendering all I get to see is nothing but a white screen, whereas all MVC-dependencies are loaded and the launch() in Ext.application is being triggered properly. There are no JavaScript errors in the console at all and all Ext classes/objects/methods are available.
This is the basic setup of my Ext.application block:
Ext.application({
name: 'MyApp',
models: [
'TestModel',
'UserModel',
'HauptmenueModel',
/* ... */
],
controllers: [
'MyController'
],
views: [
'Benutzer',
'Startseite',
/* ... */
],
stores: [
'TestStore',
'UserStore',
'HauptmenueStore',
/* ... */
],
launch: function () {
Ext.Viewport.add(Ext.create('MyApp.view.Startseite'));
console.log(document.body.innerHTML.length);
}
});
The views (e. g. the MyApp.view.Startseite view) are defined quite conventional:
Ext.define('MyApp.view.Startseite', {
extend: 'Ext.Panel',
config: {
id: 'Startseite',
layout: 'card',
items: [
/* ... */
]
},
/* ... */
});
What is interesting: Sencha Touch does indeed generate a lot of HTML content depending on the view I am loading via Ext.Viewport.add(), which I can deduce from the innerHTML.length I am logging. But nothing shows up in the WebView. The size consequently changes if I create a different view and load it via Ext.Viewport.add() but the viewport remains white.
What could be the reason for this? I am also very thankful for any tips on debugging this or somehow isolating this issue.
A possible reason for this could be the WebView’s layout itself. Please check the layout height of the WebView. Setting it to MATCH_PARENT should do the job.
It is recommended to set the WebView layout height to a fixed value or
to MATCH_PARENT instead of using WRAP_CONTENT.
See the Layout size section here:
http://developer.android.com/reference/android/webkit/WebView.html