React Native View Render

how can I render views conditionally? Example: if my app has not connected to internet - render error view, if connected - render WebView? Does that possible with react native? I want to render not pure html

Answers:

Answer

Logic to render views conditionally, using your example:

render() {
  if (!this.state.isConnected) { // error
    return (
      <View></View>
    );
  }
  else {
    return ( // webview
      <WebView />
    );
  }
}
Answer

In your render method , you can define conditionals like the example below. For instance, you may check your connection at componentDidMount method and then set your props.

 render(){
          if(this.state.isConnected == 'Online' )
            return this.webView();
          else
            return this.renderAnotherView();
        }
Answer

If it's specific to the WebView, this component contains two render functions.

renderError function

Function that returns a view to show if there's an error.

renderLoading function

Function that returns a loading indicator.

WebView Component Docs.

With renderError function you can return a view indicated there's an error including the app is not connected to the internet.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.