Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-webview-autoheight with all npm packages installed. Try it out:

var reactNativeWebviewAutoheight = require("react-native-webview-autoheight")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-webview-autoheight v1.0.6

React Native WebView with AutoHeight

React Native WebView Autoheight

React Native WebView which sets it's height automatically with minimal efforts.

You can also add custom CSS style or javascript to your webview using below example.

Downloads

Installation

npm install --save react-native-webview-autoheight

Usage

import MyWebView from 'react-native-webview-autoheight';
const customStyle = "<style>* {max-width: 100%;} body {font-family: sans-serif;} h1 {color: red;}</style>";
const htmlContent = "<h1>This is title</h1><p>Throw your entire HTML here</p>";

<MyWebView
    source={{html: customStyle + htmlContent}}
    startInLoadingState={true}
/>
<MyWebView
    source={{uri: 'http://example.com/helloworld.html'}}
    startInLoadingState={true}
/>

Props

  • Same as https://facebook.github.io/react-native/docs/webview.html#props
  • autoHeight (default: true)
  • width (default: Screen width)
  • defaultHeight (default height unless autoHeight)

How it works

It is a very simple wrapper around the built-in React Native Webview, which updates the height of the webview based on a state change using onNavigationStateChange.

Feel free to add issues or feature requests

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free