react native Webview Process Terminated - react-native

Im using react native to show a local HTML on a web view,
I have noticed that some times randomly, the webView crashes, and I get the message on console:
Webview Process Terminated
I have searched about it, but cannot find any answers?
what is that? why is happening? how to avoid it or reload web view after that error?
<WebView
style={styles.webContainer}
originWhitelist={['*']}
source={isAndroid ? {uri:'file:///android_asset/binaura.html'} : HTML_FILE}
javaScriptEnabled={true}
domStorageEnabled={true}
/>

If by "WebView" you mean react-native-webview:
This happens on iOS if the WebView is using too many resources, and results in either the WebView crashing (showing a blank white page) or the app freezing.
There is a callback property, onContentProcessDidTerminate (introduced in this PR), that you can use to listen for termination and force a reload of the WebView by updating its key. It's a bit of a hack, but it works.
Usage example:
class MyComponent extends Component {
state = {
webviewKey: 0,
}
reload() {
this.setState({
webviewKey: this.state.webviewKey + 1,
})
}
render() {
return (
<WebView
key={this.state.webviewKey}
onContentProcessDidTerminate={this.reload}
/>
)
}
}

#pjivers answer put us on the right track but the current react-native-webview already has a reload() method you can use. You only need a bit of ref setup to call it:
class MyComponent extends Component {
constructor(props) {
super(props);
this.webViewRef = React.createRef();
}
render() {
return (
<WebView
ref={this.webViewRef}
onContentProcessDidTerminate={this.webViewRef.current?.reload}
/>
)
}
}

Related

Programmatically Closing React Native Swipe List View

I'm using react-native-swipe-list-view (https://github.com/jemise111/react-native-swipe-list-view) in my React Native app and I'm trying to close rows programmatically.
Once the user swipes to the right or left and clicks the button there, I call a function to make API calls and handle a few things. This is where I also try to close the row programmatically. This is working ONLY for the last item in the list. Anything above it, the row stays open.
I do hit my handleClickUpdateItemStatus() function and the API call works fine but as I said, only the last item in the list will close. Anything above that one stays open even though all the other code in the function work fine.
My code looks like this:
class MyComponent extends Component {
constructor(props) {
super(props);
this.handleClickUpdateItemStatus = this.handleClickUpdateItemStatus.bind(this);
}
handleClickUpdateItemStatus(itemId, value) {
this._swipeListView.safeCloseOpenRow();
// Call my API to update item status
}
render() {
return(
<Container>
<SwipeListView
ref={ref => this._swipeListView = ref}
data={this.props.items}
... // Omitted for brevity />
</Container>
);
}
}
Any idea what's causing this?

Has an item been seen - React Native

I am trying to update the state of an item in a JSON file (isRead) once an application has been opened. I am using react native but can not find any documentation on the subject. Is there such functions?
I am not sure whether I need to use call backs or anything like that, as it is a simple app, loading the files locally.
My Logic is like this:
if(isRead == false){
Render i
}
else{
Render i++
}
You can use setState.I will show for you counter example about subject.You should review following code.
import React,{Component} from "react"
import {View,TouchableOpacity,Text} from "react-native"
class Test extends Component{
state ={
count = 0
}
changeCount(){
this.setState({count:this.state.count++})
}
render(){
return(
<View>
<TouchableOpacity onPress={this.changeCount.bind(this)}/>
<Text>{this.state.count}</Text>
<View/>)
}
}

React Native - seeing stuff load

This might be kinda an awkward question as I am not sure the best way to phrase this..
My React Native app does a decent amount of pulling from a server.. its a social app, sometimes when I load a page in the app that is pulling a decent amount of data from a server you can kinda see stuff loading in.. like almost kinda slowly
Is their a solution to this, maybe a way so it dosen't even render the page until its completely done loading? Or is the solution some sort of loading animation? Any help would be awesome
I believe this is a UX problem and therefore needs a solution such as an activity indicator or overlay with a loading message. Also like Facebook's newsfeed approach, you can display default empty cards so as to make users know that the page is loading.
An easy solution to avoid premature content flashing is to render the content only after fetching is completed. Below is an example component demonstrating this idea.
class YourComponent extends React.Component {
static propTypes = {
fetchData: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props);
this.state = {
dataFetched: false
};
}
async componentDidMount() {
await this.props.fetchData();
this.setState({dataFetched: true});
}
render() {
return (
<View>
{this.state.dataFetched ?
<Text>Fetched</Text> :
null
}
</View>
);
}
}

Navigator not working in React Native App (Argument 0 (NSNumber))

I am trying to get navigation between views to work in React Native like so:
newUserFlow() {
this.props.navigator.push({
title: "Create Account",
component: F8InfoView,
});
}
<TopFiveButton
style={styles.button}
onPress={this.newUserFlow.bind(this)}
caption="Create Account"
/>
However, I am running into this error on click:
ExceptionsManager.js:75 Argument 0 (NSNumber) of RCTNavigatorManager.requestSchedulingJavaScriptNavigation must not be null
This worked previously, but something seems to have changed. What could be the issue?
The debugger references this in the exceptions manageR:
// Flow doesn't like it when you set arbitrary values on a global object
(console: any)._errorOriginal = console.error.bind(console);
am I breaking something in flow?
Edit
index.ios.js looks like this:
class nomad extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Nomad',
component: LoginScreen
}} />
);
}
};
then in LoginScreen:
class LoginScreen extends React.Component {
newUserFlow() {
this.props.navigator.push({
title: "Create Account",
component: F8InfoView,
// passProps: {userInfo: this.props.userInfo}
})
}
render() {
return (
<F8Button
style={styles.button}
onPress={this.newUserFlow.bind(this)}
caption="Create Account"
/>
);
}
}
Clicking the button gives me the error.
Which version are you using for react ? Are you sure to be on the last stable version ? I ask you that because in ExceptionsManager.js, I cannot see "NSNumber" on line 75...
Let me underline that this question is very similar... so have you tried to put
navigator.push(routes[1]);
inside the onPress prop. ?
something like:
<F8Button onPress={
() => { if (route.index === 0){
navigator.push(routes[1]);
} else {
navigator.pop();
}
}
...
...
To conclude you may also have a closer look at https://facebook.github.io/react-native/docs/navigator.html
Regards
Hope this solution helps you a bit
Problems which might have occured
The problem was that once you execute the onPressevent, the i index is beyond bounds so the node can't be found.
Something tells me this happened because you were trying to access a ref that is null because you put the dropdown list in the renderScene function of a navigator. I had the exact same problem.
Please consider posting your code or debugging the findNodeHandle result, because this error is produced once you send null as a node.
The error may br due to React being unable to find the node because findNodeHandle doesn't get a React node as a parameter.
It may be the problem that you are sending a null node to the event. Try to debug what you're getting in the findNodeHandle function.
Solutions
You have to change all the refs to this.refs.navigator.refs['any reference made in your code'] etc.
Don't forget to give the actual navigator a ref
<Navigator
ref='navigator'

Set updated state props on button click using redux

I am trying to create a button which is displaying and hiding a navigation menu on click. I am using Redux to get the current state into the Component, but something is not working with the onPress function.
When pressing the button I want to check the current state of this.state.showNavigation (can be true/false) but I am getting an "undefined is not an object" error immediately after clicking the button.
I think I am running into a lifecycle issue here. I already tried to ship around this via setting the state in componentWillMount like that:
componentWillUpdate(){
this.state = NavigationStore.getState();
}
Anyway that didn't help. Some advise is much appreciated. Thanks!
Heres my code:
class NavigationButton extends React.Component {
constructor(props, context) {
super(props, context);
this.state = NavigationStore.getState();
NavigationStore.subscribe(() => {
this.setState(NavigationStore.getState());
});
// alert(this.state.showNavigation);
}
render() {
return (
<TouchableOpacity
onPress={this.handlePressButton}
style={navigationButtonStyles.button}>
<Image source={buttonImage} />
</TouchableOpacity>
);
}
handlePressButton() {
if(this.state.showNavigation){
NavigationStore.dispatch({
type: 'HIDE_NAVIGATION',
});
}
else{
NavigationStore.dispatch({
type: 'SHOW_NAVIGATION',
});
}
}
};
I was using a pretty strange approach, I did not use the react-redux package for the whole thing and couldn't connect my store. I deep dived into https://github.com/bartonhammond/snowflake and got it solved, the snowflake example was really helpful to understand the basics!