react-native/website/versioned_docs/0.18/webview.md

id, title, original_id

id	title	original_id
version-0.18-webview	webview	webview

WebView

Renders a native WebView.

Edit on GitHubProps #

View props... #

automaticallyAdjustContentInsets bool #

contentInset {top: number, left: number, bottom: number, right: number} #

html string #

injectedJavaScript string #

Sets the JS to be injected when the webpage loads.

onNavigationStateChange function #

renderError function #

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

renderLoading function #

Function that returns a loading indicator.

startInLoadingState bool #

style View#style #

url string #

iosallowsInlineMediaPlayback bool #

Determines whether HTML5 videos play inline or use the native full-screen controller. default value false NOTE : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute."

iosbounces bool #

androiddomStorageEnabledAndroid bool #

Used on Android only, controls whether DOM Storage is enabled or not

androidjavaScriptEnabledAndroid bool #

Used on Android only, JS is enabled by default for WebView on iOS

iosonShouldStartLoadWithRequest function #

Allows custom handling of any webview requests by a JS handler. Return true or false from this method to continue loading the request.

iosscalesPageToFit bool #

Sets whether the webpage scales to fit the view and the user can change the scale.

iosscrollEnabled bool #

Edit on GitHubExamples #

'use strict';

var React = require('react-native'); var { StyleSheet, Text, TextInput, TouchableOpacity, View, WebView } = React;

var HEADER = '#3b5998'; var BGWASH = 'rgba(255,255,255,0.8)'; var DISABLED_WASH = 'rgba(255,255,255,0.25)';

var TEXT_INPUT_REF = 'urlInput'; var WEBVIEW_REF = 'webview'; var DEFAULT_URL = 'https://m.facebook.com';

var WebViewExample = React.createClass({

getInitialState: function() { return { url: DEFAULT_URL, status: 'No Page Loaded', backButtonEnabled: false, forwardButtonEnabled: false, loading: true, scalesPageToFit: true, }; },

inputText: '',

handleTextInputChange: function(event) { this.inputText = event.nativeEvent.text; },

render: function() { this.inputText = this.state.url;

<span class="token keyword">return</span> <span class="token punctuation">(</span>
  &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
    &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>addressBarRow<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
      &lt;TouchableOpacity
        onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>goBack<span class="token punctuation">}</span>
        style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>backButtonEnabled <span class="token operator">?</span> styles<span class="token punctuation">.</span>navButton <span class="token punctuation">:</span> styles<span class="token punctuation">.</span>disabledButton<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span>
           <span class="token punctuation">{</span><span class="token string">'&lt;'</span><span class="token punctuation">}</span>
        &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</span>
      &lt;TouchableOpacity
        onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>goForward<span class="token punctuation">}</span>
        style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>forwardButtonEnabled <span class="token operator">?</span> styles<span class="token punctuation">.</span>navButton <span class="token punctuation">:</span> styles<span class="token punctuation">.</span>disabledButton<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span>
          <span class="token punctuation">{</span><span class="token string">'&gt;'</span><span class="token punctuation">}</span>
        &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</span>
      &lt;TextInput
        ref<span class="token operator">=</span><span class="token punctuation">{</span>TEXT_INPUT_REF<span class="token punctuation">}</span>
        autoCapitalize<span class="token operator">=</span><span class="token string">"none"</span>
        defaultValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>url<span class="token punctuation">}</span>
        onSubmitEditing<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSubmitEditing<span class="token punctuation">}</span>
        onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleTextInputChange<span class="token punctuation">}</span>
        clearButtonMode<span class="token operator">=</span><span class="token string">"while-editing"</span>
        style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>addressBarTextInput<span class="token punctuation">}</span>
      <span class="token operator">/</span><span class="token operator">&gt;</span>
      &lt;TouchableOpacity onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>pressGoButton<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>goButton<span class="token punctuation">}</span><span class="token operator">&gt;</span>
          &lt;Text<span class="token operator">&gt;</span>
             Go<span class="token operator">!</span>
          &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
        &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
    &lt;WebView
      ref<span class="token operator">=</span><span class="token punctuation">{</span>WEBVIEW_REF<span class="token punctuation">}</span>
      automaticallyAdjustContentInsets<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
      style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>webView<span class="token punctuation">}</span>
      url<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>url<span class="token punctuation">}</span>
      javaScriptEnabledAndroid<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
      domStorageEnabledAndroid<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
      onNavigationStateChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onNavigationStateChange<span class="token punctuation">}</span>
      onShouldStartLoadWithRequest<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onShouldStartLoadWithRequest<span class="token punctuation">}</span>
      startInLoadingState<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
      scalesPageToFit<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>scalesPageToFit<span class="token punctuation">}</span>
    <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>statusBar<span class="token punctuation">}</span><span class="token operator">&gt;</span>
      &lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>statusBarText<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>status<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
  &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

},

goBack: function() { this.refs[WEBVIEW_REF].goBack(); },

goForward: function() { this.refs[WEBVIEW_REF].goForward(); },

reload: function() { this.refs[WEBVIEW_REF].reload(); },

onShouldStartLoadWithRequest: function(event) { // Implement any custom loading logic here, don't forget to return! return true; },

onNavigationStateChange: function(navState) { this.setState({ backButtonEnabled: navState.canGoBack, forwardButtonEnabled: navState.canGoForward, url: navState.url, status: navState.title, loading: navState.loading, scalesPageToFit: true }); },

onSubmitEditing: function(event) { this.pressGoButton(); },

pressGoButton: function() { var url = this.inputText.toLowerCase(); if (url === this.state.url) { this.reload(); } else { this.setState({ url: url, }); } // dismiss keyboard this.refs[TEXT_INPUT_REF].blur(); },

});

var styles = StyleSheet.create({ container: { flex: 1, backgroundColor: HEADER, }, addressBarRow: { flexDirection: 'row', padding: 8, }, webView: { backgroundColor: BGWASH, height: 350, }, addressBarTextInput: { backgroundColor: BGWASH, borderColor: 'transparent', borderRadius: 3, borderWidth: 1, height: 24, paddingLeft: 10, paddingTop: 3, paddingBottom: 3, flex: 1, fontSize: 14, }, navButton: { width: 20, padding: 3, marginRight: 3, alignItems: 'center', justifyContent: 'center', backgroundColor: BGWASH, borderColor: 'transparent', borderRadius: 3, }, disabledButton: { width: 20, padding: 3, marginRight: 3, alignItems: 'center', justifyContent: 'center', backgroundColor: DISABLED_WASH, borderColor: 'transparent', borderRadius: 3, }, goButton: { height: 24, padding: 3, marginLeft: 8, alignItems: 'center', backgroundColor: BGWASH, borderColor: 'transparent', borderRadius: 3, alignSelf: 'stretch', }, statusBar: { flexDirection: 'row', alignItems: 'center', paddingLeft: 5, height: 22, }, statusBarText: { color: 'white', fontSize: 13, }, spinner: { width: 20, marginRight: 6, }, });

exports.displayName = (undefined: ?string); exports.title = '<WebView>'; exports.description = 'Base component to display web content'; exports.examples = [ { title: 'WebView', render(): ReactElement { return <WebViewExample />; } } ];

Next →