WebView

Note Remember the following when using WebView:

• Facebook has deprecated WebView. For continued support past its removal by Facebook, import the You.i React Native WebView component from react-native-youi.

• WebView is only supported on iOS, Android (excluding Android TV), and UWP. On UWP, WebView support is currently display-only; it does not support direct user interaction.
• Payload for each callback/prop is empty, unless specified otherwise.

The WebView component renders any web content in a native view. Due to Facebook deprecating this component, we recommend importing WebView from react-native-youi.

Example usage

import { WebView } from 'react-native';
...
<WebView
   source={{uri: 'https://en.wikipedia.org/wiki/React_(JavaScript_library)'}} 
   onLoad={() => this.setState({loadingOccurred: true})} 
   onError={() => this.setState({ errorOccurred: true })} 
   onLoadStart={() => this.setState({ loadingStarted: true })}
   onLoadEnd={() => this.setState({ loadingEnded: true })}
   onNavigationStateChange={() => this.setState({ navigationStateChange: true })}
    bounces={this.state.bounceAllowed}
 scrollEnabled= {this.state.scrollAllowed}
 decelerationRate={this.state.decelerationSpeed}
 renderError={(e) => {
   console.log("You.i: Render Error! The url may be invalid, or the connection timed out");
   return (
  <View style={styles.container}>
   <Text style={styles.text}> This is the renderError View! </Text>
  </View>
   );
 }}
 startInLoadingState={true}
 renderLoading={(e) => {
   return (
  <View style={styles.container}>
    <Image source={{uri: "https://codepen.io/biacosta/pen/QwBdBB/image/large.png"}}
   style={{width:1024, height:600, bottom:340, left: 140 }}
   />
  </View>
   );
 }}
/>

Props

• [source: object] (#prop-source)

• [onError: function] (#prop-onerror)

• [onLoad: function] (#prop-onload)

• [onLoadEnd: function] (#prop-onloadend)

• [onLoadStart: function] (#prop-onloadstart)

• [onNavigationStateChange: function] (#prop-onnavigationstatechange)

• [renderError: function] (#prop-rendererror)

• [renderLoading: function] (#prop-renderloading)

• [startInLoadingState: boolean] (#prop-startinloadingstate)

• [decelerationRate: number] (#prop-decelerationrate)

• [bounces: boolean] (#prop-bounces)

• [scrollEnabled: boolean] (#prop-scrollenabled)

Reference

Prop: source

Similar to source prop of Facebook React Native WebView component.

Prop: onError

Similar to onError prop of Facebook React Native WebView component.

Prop: onLoad

Similar to onLoad prop of Facebook React Native WebView component.

Prop: onLoadEnd

Similar to onLoadEnd prop of Facebook React Native WebView component.

Prop: onLoadStart

Similar to onLoadStart prop of Facebook React Native WebView component.

Prop: onNavigationStateChange

Similar to onNavigationStateChange prop of Facebook React Native WebView component.

Prop: renderError

Similar to renderError prop of Facebook React Native WebView component.

Prop: renderLoading

Similar to renderLoading prop of Facebook React Native WebView component.

Prop: startInLoadingState

Similar to startInLoadingState prop of Facebook React Native WebView component.

Prop: decelerationRate

Similar to decelerationRate prop of Facebook React Native WebView component.

Note It is supported on iOS only.

Prop: bounces

Similar to bounces prop of Facebook React Native WebView component.

Note It is supported on iOS only.

Prop: scrollEnabled

Similar to scrollEnabled prop of Facebook React Native WebView component.

Note It is supported on iOS only.