CODEWITHSUNDEEP
javascriptreactjsrenderingreact-native
IntoTheDeep
IntoTheDeep

Reputation: 4118

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

Upvotes: 5

Views: 5096

Answers (3)

Josh Buchea
Josh Buchea

Reputation: 1446

Logic to render views conditionally, using your example:

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

Upvotes: 4

Nicolas Charpentier
Nicolas Charpentier

Reputation: 1118

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.

Upvotes: 0

sekogs
sekogs

Reputation: 292

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();
        }

Upvotes: 3

Related Questions